0

I'm using flex to put an image and a text in 1 line. I'd like to horizontally align the two. align-items: center didn't work at all.

align-items: flex-start; kind of horizontally aligned the two, but it's not precise.

enter image description here

Not sure what's going on here. I'm looking align the two horizontally very precisely, help would be appreciated. I tried adding style="vertical-align:middle;" to <img>, but didn't work either.

.entrepreneur {
  display: flex;
  align-items: flex-start;
  vertical-align: middle;
}

.entrepreneur img {
  width: 35px;
  margin-top: 0;
  margin-bottom: 0; 
}

.entrepreneur #text {
  margin-left: 10px;
  margin-top: 0;
  margin-bottom: 0
}


    
<div class="entrepreneur">
  <img src="img/Mark.jpg" alt="">
  <p id="text">Mark</p>
</div>
fcdt
  • 2,371
  • 5
  • 14
  • 26

2 Answers2

1

flex direction by default is by row. justify-content will center items on the horizontal axis and align-items will align items vertically. You can change the direction to column and then these flip.

#container{
display:
flex;
justify-content:space-evenly;
align-items:center;}
<div id='container'>
<img src='https://via.placeholder.com/350'>
<p>some text</p>
</div>
DCR
  • 14,737
  • 12
  • 52
  • 115
0

#container {
  display: flex;
  place-items: center;
}

p {
  margin-left: auto; // Just an example
}
<div id="container">
  <img src="https://via.placeholder.com/350">
  <p>TEXT...</p>
</div>

About place-items: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items

AbsoluteBeginner
  • 2,160
  • 3
  • 11
  • 21