Question

我是一个新手，我知道这个问题已被问过很多，但我仍然在摸索找到一个我理解的明确答案。我不想使用表格或flexbox只是简单的CSS。

必填： 我有一个图像，想要将多行文本垂直居中到图像的右侧。

我尝试了什么： 我已将文本放在div中，显示为：inline-block。然后使用vertical-align：middle设置图像和div的样式。

问题： 这似乎有效，但为什么呢？我需要将文本放在div中吗？我能写更少的代码吗？图像的高度将根据视口宽度而变化。

看到这个JS小提琴 https://jsfiddle.net/4LLruu7c/

＆＃13;

img {
  width: 40%;
  margin-right: 30px;
  vertical-align: middle;
}
.list_text {
  display: inline-block;
  width: calc(60% - 40px);
  vertical-align: middle;
}

＆＃13;

<ul>
  <li>
    <img src="//placehold.it/200x200">
    <div class="list_text">Client name
      <br>Project title, desciption and blurb</div>
  </li>
</ul>

＆＃13;

Answer 1

来自https://developer.mozilla.org/en/docs/Web/CSS/vertical-align：

值（对于内联元素）

大多数值相对于父元素垂直对齐元素：

<强>中间

将元素的中间与基线加上父级的x高度的一半对齐。

这意味着您需要使用文本div以确保您有两个内联元素，并且它们相对于父元素在行的中间垂直对齐。

由于您的图像是该行中最高的图像，这意味着文本div将与行的中间对齐，这实际上是图像的中间部分，这就是您的代码工作的原因

垂直对齐图像旁边的div而不使用table或flexbox

1 个答案: