带对齐的水平 div

Question

我正在尝试避免使用 table 布局来进行特定布局。我知道这是草率的编程，所以我正在重做。我似乎无法使用 div 标签重新创建这样的东西：

<table border=10 cellpadding=10 width="90%">
    <tr>
        <td align="center" width="143">
            <img src="http://blah.com/images/133widepixelimage.jpg">
        </td>
        <td align="center">
            Some text describing the image
        </td>
    </tr>
</table>

我在 CSS 文件中完成了边框、内边距、宽度和对齐，效果很好。但是设置居中图像的宽度仍然不允许居中文本显示在图像的右侧。它仍然换行到下一行。如果我将图像居中放置在左侧，并设置 float: left，就可以了。但即使父 div 足够宽以容纳，也不会以两个为中心。

Answer 1

试试这个片段：

.container{
    margin-top: 30px;
    width: 90%;
    display: flex;
    border: 10px solid black;
    height: 50px;
    border-left-color: gray;
    border-top-color: gray;
}
.img{
    width: 143px;
}
.img > img{
    width: 100%;
}
.container > div {
    vertical-align: middle;
    line-height: 40px;
    text-align: center;
    margin: 1px;
    border: 1px solid black;
    display: inline-block;
}
.text{
    flex: 1;
}

 <div class="container">
        <div class="img">
            <img src="http://blah.com/images/133widepixelimage.jpg">
        </div>
        <div class="text">
            Some text describing the image
        </div>
 </div>

你可以用 div 来做，像上面的例子那样使用 flexbox

带对齐的水平 div

Horizontal divs with alignment

html

css

css-float