CODEWITHSUNDEEP
css-floatvertical-alignmentfixed-width
Erab BO
Erab BO

Reputation: 826

how to vertical align dynamic height

I'm trying to center align a floating div inside a fixed div with a dynamic height. is there any way to do it without define the height anywhere but the fixed parent div?

here is the HTML code:

<div class="main">
    <div class="child">
        test
    </div>
</div>

here is the css:

.main{
    position:fixed;
    height:100px;
    top:0px;
    width:100%;
    background-color:yellow;
}

.child{
    display:table-cell;
    height:100%;
    vertical-align:middle;
    width:100px;
    background-color:lightblue;
    float:left;
}

here is a fiddle with it: the link to the jsFiddle

Thanks :)

Upvotes: 0

Views: 1691

Answers (1)

Filip Huysmans
Filip Huysmans

Reputation: 1341

Try this code:

http://jsfiddle.net/KS523/4/

.child{
    height:100%;
    vertical-align: center;
    width:100px;
    background-color:lightblue;
    display:inline-block;


/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}

The new part makes the element horizontally and vertically centered to its parent.

Upvotes: 1

Related Questions