我正在研究fiddle,我想在其中将CSS中的文本垂直居中。
我用来构建小提琴的HTML代码是:
<div class="poster text-center pt-4">
<div class="item">
<img class="item_poster_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<div class="poster_name_location">
<p class="mb-0">posted by,<span style="color:#ff8b5a;">hello</span></p>
<p class="poster_location">located in, <span style="color:#ff8b5a;">San Francisco, California</span></p>
</div>
</div>
问题陈述:
我想知道我需要在fiddle中添加什么CSS代码,以便文本位于图像的中心。
我尝试添加以下CSS代码,但似乎无法正常工作。
.poster_name_location
{
middle
}
答案 0 :(得分:1)
您可以使用flex-box
和align-items: center
来实现。
.item_poster_image {
height: 120px;
width: 120px;
-o-object-fit: contain;
object-fit: contain;
max-width: 100%;
border-radius: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.item {
padding: 0;
margin: 0px 10px 0px 10px;
}
.poster {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.poster_name_location {
text-align: left;
display: block;
justify-content: center;
}
.text-center {
align-items: center;
}
<div class="poster text-center pt-4">
<div class="item">
<img class="item_poster_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<div class="poster_name_location">
<p class="mb-0">posted by, <span style="color:#ff8b5a;">hello</span></p>
<p class="poster_location">located in, <span style="color:#ff8b5a;">San Francisco, California</span></p>
</div>
</div>