如何在 css 中垂直居中 p 标签文本

Question

我正在处理 fiddle，我想在其中将 css 中的文本垂直居中。

我用来构建 fiddle 的 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
}

Answer 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>

如何在 css 中垂直居中 p 标签文本

How to vertically center p tags text in css

html

css

vertical-alignment