使用flex横向对齐图像和文本
提问于 2020-09-12 15:50:37
我使用flex将图像和文本放在一行中。我想要水平对齐这两个。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>
回答 2
Stack Overflow用户
发布于 2020-09-12 16:17:44
默认情况下，flex方向是按行。对齐-内容将项目在水平轴上居中，对齐-项目将垂直对齐项目。您可以将方向更改为列，然后翻转这些方向。
#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>
Stack Overflow用户
发布于 2020-09-12 16:37:08
#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
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63862137
复制相关文章
点击加载更多
腾讯云开发者
