Question

当我左边有一个图像时，我试图想出一种垂直居中两个并排div的内容的方法，右边是文本。唯一的问题是，即使段落的长度发生变化，它也必须起作用。有没有办法确保每个“部分”中的图像/段落始终垂直居中，无论图像高度是大于还是小于段落文本高度？

HTML：

<div class="section">
  <div class="paragraph">
    <img src="http://placehold.it/350x150" />
    <p>
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet
    </p>
  </div>
</div>
<div class="section">
  <div class="paragraph">
    <img src="http://placehold.it/350x150" />
    <p>
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet 
       Lorem ipsum delor sit amet Lorem ipsum delor sit amet
     </p>
  </div>
</div>

CSS：

.section {
  padding: 1% 0;
  clear: both;
  display: block;
  overflow: hidden;
}
img {
  width: 25%;
}
p {
  margin: 0;
  width: 50%;
}
img, p {
  float: left;
  padding: 2% 1%;
}

我的jsfiddle：https://jsfiddle.net/fLgsrqqm/

Answer 1

只需更改此规则:(无浮动，垂直对齐：中间）

img, p {
  display: inline-block;
  padding: 2% 1%;
  vertical-align: middle;
}

https://jsfiddle.net/3wt1t8zx/

Answer 2

添加以下代码并查看其是否有效：

.paragraph {
    display:flex;
    align-items:center;
}

Answer 3

您是否尝试过使用CSS3 Flexbox进行布局： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

另外看看： http://caniuse.com/#search=flexbox

无论什么尺寸内容，两个并排div的中心内容垂直

3 个答案: