Why display: table doesn't center the div?

Question

.headers
{
    background-color: #ff0000;
    width: 100%;
    overflow: hidden;
    display: table;
}
.logo
{
    height: 35px;
    border: 1px solid #00ff00;
    float: left;
    width: 30px;
}
.slogan
{
    float: right;
    display: table-cell;
    vertical-align: middle;
}

<div class="headers">
    <div class="logo"></div>
    <div class="slogan">IIN</div>
</div>

How do i center my div[slogan] without using negative margin/top 50%?

possible duplicate of [Horizontally center a div in a div](http://stackoverflow.com/questions/114543/horizontally-center-a-div-in-a-div) — Dylan Corriveau, Apr 28 '15 at 15:29
`float: right` made the div text to float at the top right.. Add `line-height: 35px;` to your CSS `.slogan` — Pugazh, Apr 28 '15 at 15:34

MikeM · Accepted Answer · 2015-04-28T15:37:22.773

4

you don't need floats when using display: table/table-cell ... this should center the .slogan div using the table-cell layout.

.headers
{
    background-color: #ff0000;
    width: 100%;
    overflow: hidden;
    display: table;
}
.logo
{
    height: 35px;
    border: 1px solid #00ff00;
    /*float: left; NOT THIS */
    width: 30px;
    display: table-cell; /* THIS */
}
.slogan
{
    /*float: right; NOT THIS */
    display: table-cell;
    vertical-align: middle;
    text-align: right; /* THIS */
}

<div class="headers">
    <div class="logo"></div>
    <div class="slogan">IIN</div>
</div>

edited Apr 28 '15 at 15:37

answered Apr 28 '15 at 15:35

MikeM

27,227
4
64
80

I want it aligned vertically at right. Not horizontally – Gibbs Apr 28 '15 at 15:36
Yes thanks. Should i set width to restrict it to only content's width? – Gibbs Apr 28 '15 at 15:39
@GopsAB shouldn't need to...you can set the width of the `.headers` div and `.slogan` will auto size (`.headers` width minus `.logo` width) – MikeM Apr 28 '15 at 15:43

score 1 · Answer 2 · answered Apr 28 '15 at 15:35

1

If you are looking to middle slogan vertically then please check the fiddle https://jsfiddle.net/nileshmahaja/e6byt6zt/

CSS

.headers
{
    background-color: #ff0000;
    width: 100%;
    overflow: hidden;
    display: table;
    vertical-align:middle;
}
.logo
{
    height: 35px;
    border: 1px solid #00ff00;
    float: left;
    width: 30px;
}
.slogan
{
    display: table-cell;
    vertical-align: middle;
    text-align:right;
}

answered Apr 28 '15 at 15:35

Nilesh Mahajan

3,506
21
34

Yes It does. Please use [ctrl+M] here after instead fiddle. – Gibbs Apr 28 '15 at 15:48

score 1 · Answer 3 · answered Apr 28 '15 at 15:37

1

change your slogan class with this

.slogan {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

answered Apr 28 '15 at 15:37

LTasty

2,008
14
22

score 0 · Answer 4 · edited May 23 '17 at 12:06

0

You should use 'margin: 0 auto ;' on the . If you want to align text inside the div you can just use 'text-align: center ;'.

Check this post click

edited May 23 '17 at 12:06

Community

1
1

answered Apr 28 '15 at 15:31

Atanas44

3
3

well this works if you add to your fiddle: `width: 100%;` to slogan. – Doml The-Bread Apr 28 '15 at 15:36
Yes @DomlThe-Bread. Atanas please use demos to demonstrate your solution – Gibbs Apr 28 '15 at 15:50

Why display: table doesn't center the div?

4 Answers4