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

我在将div的内容居中时遇到麻烦display: table-row。

这是提琴手。

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

如何将a的内容水平居中div .table-row？

我尝试margin: 0 auto与结合使用width: 100%，但没有用。都没有使用text-align: center。