如何解决使用flex水平对齐图像和文本
我正在使用flex将图像和文本放在1行中。我想将两者水平对齐。 align-items: center
根本不起作用。
align-items: flex-start;
在水平方向上将二者对齐,但这并不精确。
不确定这里发生了什么。我希望将两者精确地水平对齐,将不胜感激。我尝试将style="vertical-align:middle;"
添加到<img>
,但是也没有用。
.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>
解决方法
默认情况下,
弯曲方向是按行。 justify-content将使项目在水平轴上居中,align-items将使项目在垂直方向上对齐。您可以将方向更改为列,然后将其翻转。
#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>
,
#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>
关于place-items
:https://developer.mozilla.org/en-US/docs/Web/CSS/place-items