css - Vertical centring image with display table-cell not working -
im trying vertically centre image using css display table-cell. why code not working? looks should according css-tricks.css
http://css-tricks.com/centering-in-the-unknown/
.cont { background-color: grey; position: fixed; height: 100%; width: 100%; display: table; } img { display: table-cell; vertical-align: middle; } <div class="cont"> <img src="http://www.quarktet.com/icon-small.jpg" /> </div>
the img tag doesn't need display: table-cell;
, vertical-align: middle;
parent does.
so need:
.cont { background-color: grey; position: fixed; height: 100%; width: 100%; display: table-cell; vertical-align: middle; } img { } <div class="cont"> <img src="http://www.quarktet.com/icon-small.jpg" /> </div>
also, appears position: fixed
giving problems, well, , had remove work here: http://jsfiddle.net/sne4y/6/
if still need position: fixed;
(i'm assuming do) perhaps need parent div, depends on how want designed.
Comments
Post a Comment