Geek asks and answers

Horizontal content center div with display: table-row

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

Here is 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 the content horizontally div .table-row?

I tried using margin: 0 autowith width: 100%, but that didn't work. Also not used text-align: center.

+3
source share
3 answers

Add a new wrapper div and place your screen like tableand width: 100%.

Put text-align: centerin a table row.

0
source

From what I see, it is table-rowconsidered as inline-blockwhich leaves you with two options.

a
table-row div display: table margin: 0 auto

b
table-row display: table margin: 0 auto

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

+4

We don’t have elements table-rowhanging “in the air”, but place a table element around them - here I used inline-tableit so that the element can be centered using text-align:centeron the parent element (body):

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

0
source

More articles:


All Articles