0

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 :)

Erab BO
  • 776
  • 4
  • 11
  • 24

1 Answers1

1

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.

Filip Huysmans
  • 1,301
  • 1
  • 20
  • 44
  • Hi @filip, Thanks but this is not what I'm looking for. I need the content of the child to be vertically aligned to the middle + the child should float to the left and not be in the center of its parent. (the "test" should be position in vertically middle) – Erab BO Jan 13 '14 at 11:22
  • This is what I'm looking for http://jsfiddle.net/KS523/3/ but without the height:100px; in the child element, instead i want it to be dynamically height by the parent (height:100%) – Erab BO Jan 13 '14 at 11:27
  • Thanks Filip, but I'm looking for a "non w3c draft"s solutions. As far as I know the display:box (or flexbox as it commonly named) is still in draft state by the w3c org. – Erab BO Jan 13 '14 at 14:08