Question

我正在尝试将此div / columns / rows中的文本与每个句子对应的图像中间对齐。但到目前为止，它给予我的更多是一种顶级的感觉。有人可以帮我这个吗？

CSS：

.div-table {
    display:table;
    width:776px;
    height: auto;
    background-color:#eee;
    border:1px solid #666666;
    border-spacing:5px;
    /*cellspacing:poor IE support for  this*/
    clear: both;
}
#image-middle {
    vertical-align: middle;
    float: left;
    padding-right: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
}
.div-table-row {
    display:table-row;
    width: 776px;
    float: left;
    clear: both;
}
.div-table-col-first {
    display:table-column;
    width:49%;
    float: left;
}

HTML：

<div class="div-table">
    <div class="div-table-row">
        <div class="div-table-col-first">
            <img width="50" height="50" id="image-middle">First Image Text in the first column and sentence</div>
        <div class="div-table-col-first">Second Column Headline
            <br />
            <img alt="Checkbox" width="30" height="30" id="image-middle">First Image Second Column Text
            <br />
            <br />
            <img id="image-middle" alt="Padlock in a circle">Second Image Second Column Text</div>
    </div>
    <div class="div-table-row">
        <div class="div-table-col-first">
            <img width="50" height="78" id="image-middle">Second Image Text in the first column and sentence</div>
        <div class="div-table-col-first">
            <img id="image-middle" alt="Pie Chart">Third Image Second Column Text
            <br />
            <br />
            <img id="image-middle" alt="A Cover for a Safe">Fourth Image First column Text</div>
    </div>
</div>

下面是由上述标记生成的JSFiddle。

JSFiddle

Answer 1

首先，单独包装图像和文本（http://jsfiddle.net/L9FnJ/）这是为了让你开始，我不会清理你的所有代码或做所有的工作，但这应该告诉你如何这样做：

<body>
    <div class="div-table">
        <div class="div-table-row">
            <div  class="div-table-col-first">
                <div class="colImg"><img width="50" height="50" id="image-middle" /></div><div class="colText">First Image Text in the first column and sentence</div>
            </div>
            <div  class="div-table-col-first">Second Column Headline<br />
                <img alt="Checkbox" width="30" height="30"  id="image-middle">First Image Second Column Text<br />
                <br />
                <img  id="image-middle" alt="Padlock in a circle"> Second Image Second Column Text                </div>
        </div>
        <div class="div-table-row">
            <div class="div-table-col-first"><img width="50" height="78" id="image-middle">Second Image Text in the first column and sentence</div>
            <div class="div-table-col-first"><img  id="image-middle"  alt="Pie Chart">
                Third Image Second Column Text<br />
                <br />
                <img  id="image-middle" alt="A Cover for a Safe"> Fourth Image First column Text</div>
        </div>
    </div>
</body>
</html>

然后，在你的CSS中，添加：

.colImg, .colText {
display: table-cell;
vertical-align: middle;
}

Answer 2

您肯定需要将文本包装在元素中，并查看@ feitla的评论。我发现这有效：

<div style="display: table; height: 400px; overflow: hidden;">
 <div style="display: table-cell; vertical-align: middle;">
   <div>
     everything is vertically centered in modern IE8+ and others.
   </div>
 </div>
</div>

请参阅this previously asked question.

文本使用Div对齐问题

2 个答案: