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

Question

我在使用 display: table-row 将 div 的内容居中时遇到问题。

这是一个 Fiddler .

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
使用 display: table 和 margin: 0 auto

将 table-row 包裹在容器 div 中

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

fiddle :http://jsfiddle.net/zJ48q/1/