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

时间:2016-10-06 11:46:13

标签: css

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

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

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

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

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



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

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

1 个答案:

答案 0 :(得分:0)

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

  

值(对于内联元素)

     

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

     

<强>中间

     

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

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

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