Horizontal center the content of a div with display: table-row

Question

I'm having trouble centering the contents of a div with display: table-row.

Here's a 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;
}

How can I center horizontally the content of a div .table-row?

I've tried using margin: 0 auto with width: 100%, but it did not work. Neither did using text-align: center.

Answer 1

From what I'm seeing, the table-row is being treated as an inline-block which leaves you with two options.

Option a
Wrap the table-row in a container div with display: table and margin: 0 auto

Option b
Have table-row use display: table and margin: 0 auto

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