CODEWITHSUNDEEP
htmlcss
Gibbs
Gibbs

Reputation: 22974

Why display: table doesn't center the div?

.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%?

Upvotes: 3

Views: 132

Answers (4)

MikeM
MikeM

Reputation: 27405

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>

Upvotes: 4

LTasty
LTasty

Reputation: 2008

change your slogan class with this

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

Upvotes: 1

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

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

Upvotes: 1

Atanas44
Atanas44

Reputation: 3

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

Upvotes: 0

Related Questions