html - 如何进行内联块拉伸？

Question

我希望图像左对齐，但文本块在剩余空间中居中对齐。我怎么做？

html:

<ul>
    <li>
        <img src="http://mobile-streetmaps.com/wp-content/uploads/2010/01/itunesArtwork-1-08-18-08.gif" />
        <center>
            <div>
                <h1>Hello</h1>
                <p>I R Awesome</p>
            </div>
        </center>
    </li>
</ul>

CSS：

img {
    vertical-align:middle;
    display:inline-block;
}
center {
    vertical-align:middle;
    display:inline-block;
    background-color:orange;
}

jsFiddle：http: //jsfiddle.net/PVgT6/

Answer 1

正如Willem Van Bockstal对类似问题的回答中提到的，您可以在 CSS 中使用类似表格的行为。

首先给列表元素一个类，然后在css中使它成为一个表。

<li class="imgtext">

.imgtext {
    display: table;
 }

然后你做中央显示：table-cell。

center {
    vertical-align:middle;
    display: table-cell;
    width: 100%;
    background-color:orange;
}

小提琴

Answer 2

这是一个基于百分比的解决方案。

小提琴

首先，我们给我们的列表一个类来告诉他们如何处理他们的内容。

<li class="list-image">...</li>

然后我们给我们的图像一个宽度，让它和 div 搭配得很好：

li.list-image img {
    width: 20%;
    vertical-align:middle;
    display:inline-block;
}

我们的 div 需要有100% - (image-width * 2)它的宽度。这允许它在ul. 如果你只是想让它在 div 中居中（这会稍微偏右），你可以这样做100% - image-width，例如80%.

li.list-image > div {
    width: 60%;
    height: 100%;
    vertical-align:middle;
    text-align: center;
    display: inline-block;
}