Question

我无法垂直对齐（中间）带有2行文本的div。一行，是的，但不是2.我希望其中一行像h2一样，另一行像段落一样。我意识到我可以用造型来实现“h2”和“p”外观，但我不能将它们放在不同的行上。

<div class="wrapper">
    <div class="image-wrapper">
        <img src="http://lorempixel.com/output/food-q-g-300-200-9.jpg">
    </div>
    <div class="text-wrapper">
        <h2>Middle</h2>
        <p>How is this aligned?</p>
    </div>
</div>

.wrapper{
  border:1px solid #f00;
  width:90%;
  margin:0 auto;
  padding:1em;
}
.image-wrapper{
  display:inline;
  margin-right:1em;
  vertical-align:middle;
}
.text-wrapper{
  vertical-align:middle;
  display:inline;
}
.text-wrapper p{
  display:inline;
}
.text-wrapper h2{
  display:inline;
}
img{
 vertical-align:middle;
}
h2,p{
  margin:0;
}

我该怎么做？

Answer 1

从inline和p移除h2，然后为display:inline-block设置.text-wrapper：https://jsfiddle.net/ilpo/aaunr9wr/5/

编辑：它不适用于多行的原因是它的最大宽度默认为100％。因此，当您插入更多文本时，.text-wrapper不再适合与图像相同的文本行。您可以通过设置max-width来解决此问题。您的max-width最多应该是image占用空间的剩余部分：

https://jsfiddle.net/ilpo/aaunr9wr/7/

Answer 2

在.image-wrapper和.text-wrapper上使用这些样式：

display: table-cell;
vertical-align:middle;

从.text-wrapper p和.text-wrapper h2删除现有的样式。

完整的CSS：

.wrapper {
  border:1px solid #f00;
  width:90%;
  margin:0 auto;
  padding:1em;
}
.image-wrapper {
  display: table-cell;
  vertical-align:middle;
  padding-right: 1em;
}
.text-wrapper {
  display: table-cell;
  vertical-align:middle;
}
h2, p {
  margin:0;
}

Fiddle

vertical-align包装器div不适用于多行文本

2 个答案: