HTML-如何在<p>中使文本垂直居中

Question

我希望我的文字在<p>的垂直中间，而不是在底部对齐。

我的代码：

<p style="color:red;text-align:left;">
  <img src="https://i.ibb.co/zFNxsT4/1.png" width="25"> &nbsp;&nbsp;
  <b>Where Should I go ? </b>
</p>

结果：

我尝试过vertical-align:middle，但没有任何变化。
还有其他方法可以使文本在中间垂直对齐吗？

Answer 1

据我所知，唯一（也是最好的跨浏览器）方法是在元素上使用inline-block和height: 100%的{​​{1}}助手。

Answer 2

我会使用flexbox

我对您的标记做了一些更改，希望它没问题。它使用<strong>而不是<b>，并且我还给了图像height。

.flex {
  display: flex;
}

.flex strong {
  align-self: center;
}

<p class="flex">
  <img src="https://i.ibb.co/zFNxsT4/1.png" width="25" height="25"> &nbsp;&nbsp;
  <strong>Where Should I go ? </strong>
</p>

Fiddle demo

Answer 3

在vertical-align: middle元素的子元素上设置<p>：

p {
  color: red;
  text-align: left;
}

img { 
  width: 25px;
}

p > * {
  vertical-align: middle;
}

<p>
  <img src="https://i.ibb.co/zFNxsT4/1.png"> &nbsp;&nbsp;
  <b>Where Should I go ?</b>
</p>

Answer 4

您可以使用flexbox来做到这一点。同样，从语义上来说，像这样编写代码会更正确：

.wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.image {
  flex: 0 0 auto;
  width: 25px;
  margin: 0 10px 0 0;
}

<div class="wrapper">
  <img class="image" src="https://i.ibb.co/zFNxsT4/1.png">
  <p style="color:red;">Where Should I go ? </p>
</div>

Answer 5

绝对不需要表或其他任何东西。

您可以使用vertical-align: middle。 但是，您还需要设置图像vertical-align。否则，将不指定vertical-align。

这是一个有效的版本：

HTML

<p style="color:red; text-align:left;">
  <img src="https://i.ibb.co/zFNxsT4/1.png" width="25">
  <b>Where Should I go ? </b>
</p>

CSS

p > img, p > b {
    vertical-align: middle;
}

FIDDLE https://jsfiddle.net/e2y1cL07/

专业提示：

如果我想并排排元素并自动希望它们移到父母width，则将display: inline-block应用于我父母的每个孩子。

Answer 6

尝试在您的p中添加flex，它将在内部设置内容：

display: flex;
align-items: center;