我是一个新手,我知道这个问题已被问过很多,但我仍然在摸索找到一个我理解的明确答案。我不想使用表格或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;
答案 0 :(得分:0)
来自https://developer.mozilla.org/en/docs/Web/CSS/vertical-align:
值(对于内联元素)
大多数值相对于父元素垂直对齐元素:
<强>中间强>
将元素的中间与基线加上父级的x高度的一半对齐。
这意味着您需要使用文本div以确保您有两个内联元素,并且它们相对于父元素在行的中间垂直对齐。
由于您的图像是该行中最高的图像,这意味着文本div将与行的中间对齐,这实际上是图像的中间部分,这就是您的代码工作的原因