css - center vertical without knowing the height of the container -
is possible center vertical without knowing height of container?
i tried display:inline-block , vertical align: middle , not work. doing wrong?
here check: http://jsfiddle.net/dsq2n/
html:
<div class="wrap"> <div class="red1"></div> <div class="red2"></div> <div class="text"> first<br> second<br> third<br> forth </div> </div> css:
.wrap{ position:absolute; top:10px; left:10px; width:200px; text-align:center; background:grey; } .red1, .red2{ position:absolute; width:20px; height:20px; display:inline-block; /* ? */ vertical-align: middle; /* ? */ background:red; } .red1{ left:0px; } .red2{ right:0px; top:0px; }
you using position: absolute; using vertical-align of no use, this
.red1, .red2{ position:absolute; width:20px; height:20px; background:red; top: 50%; margin-top: -10px; } also need remove top: 0; from
.red2{ right:0px; } explanation : doing here is, using top: 50%; bring element down 50%; not centered, subtract -10px; using margin-top 1/2 of total height of element want center vertically
Comments
Post a Comment