对齐

Question

我正试图摆脱使用表格布局来做特定的布局。我知道这是一个草率的编程所以我正在重做它。我似乎无法使用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

试试这个代码段：

＆＃13;

＆＃13;

.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;
}

＆＃13;

 <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>

＆＃13;

＆＃13;

＆＃13; 你可以使用像上面的例子

那样使用flexbox来实现div