Question

我无法使用display: table-row将div的内容集中在一起。

HTML

<div class="table-row">
    <div class="left-right-padding">
        <ul>
            <li>TEXT EXEMPLE 1:</li>
        </ul>
    </div>
    <div class="left-right-padding">
        <ul>
            <li>TEXT EXEMPLE 2:</li>
        </ul>
    </div>
    <div class="left-right-padding">
        <ul>
            <li>TEXT EXEMPLE 3:</li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    outline: none;
    text-decoration: none;
    zoom: 1;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.clear {
    clear: both
}
.table-row {
    font-weight: bold;
    display: table-row;
    border: 1px solid #000;
}
.left-right-padding {
    padding: 0 20px 0 20px;
    display: table-cell;
    text-align: center;
}

如何横向居中div .table-row的内容？

我尝试将margin: 0 auto与width: 100%一起使用，但它无效。也没有使用text-align: center。

Answer 1

从我所看到的情况来看，table-row被视为inline-block，它为您提供了两种选择。

选项a
将table-row包裹在包含display: table和margin: 0 auto

的容器div中

选项b
table-row使用display: table和margin: 0 auto

小提琴：http://jsfiddle.net/zJ48q/1/

Answer 2

没有table-row元素挂在空中“，但在它们周围放置一个表格元素 - 我在这里使用了inline-table，以便使用text-align:center使元素居中在父元素（正文）上：

http://jsfiddle.net/zGLQX/5/

Answer 3

添加新的div包装，并将显示设为table和width: 100%。

将text-align: center放入您的表格行。

水平居中显示div的内容：table-row

3 个答案: