html - Vertical alignment of the image within a DIV tag -
html - Vertical alignment of the image within a DIV tag -
i have been playing around div tag sometime , tried doing rounded corner div tag
<div id="y" style="border: 3px solid #000000;background: #b4ef05; border-radius: 25px;width: 300px; height:200px;"> <div id="ds"style="width:100%; height:80%;border-top-left-radius: 2em;border-top-right-radius:2em; background: #b4ef05;"><span> <img style="display: block; margin:auto;border: 0 none; position: absolute;left:40px;top:30px;" src="http://www.urbanfonts.com/images/cache/fontnames/1f99582aeadde4d87491dd323d5f01db_auto_362_97.jpg"> </span></div> <div id="dscs"style="border-bottom-left-radius: 1em;border-bottom-right-radius:1em;width:100%;height:20%;background: #000000;color:#ffffff;"><span style="padding:35px;">sssd</span></div> </div>
but not able set image alignment properly, vertical-align:middle;
doesn't work. need image come middle of div automatically deciding left , top. approach right split div element 2 store 2 different values?
it's not utilize inline style in html elements :)
html
<img class="imglackey" src="http://www.urbanfonts.com/images/cache/fontnames/1f99582aeadde4d87491dd323d5f01db_auto_362_97.jpg">
css
.imglackey{ display: table-cell; border: 0 none; margin: 0 auto; } #imgcont{ display: table-cell; vertical-align: middle; } #ds{ display:table; }
fiddle
html css alignment
Comments
Post a Comment