html - 如何进行内联 block 拉伸(stretch)？

Question

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

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 answer 中所述对于类似的问题，您可以在 CSS 中使用类似表格的行为。

首先给列表元素一个类，然后在css中把它做成表格。

<li class="imgtext">

.imgtext {
    display: table;
 }

然后你让中心显示:table-cell。

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

fiddle