sairfan1 Posted January 19, 2012 Share Posted January 19, 2012 hi, im working on asp.net i have a div and in that i have image input button my css looks like this #div{ padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none; border-left: 2px groove rgba(207,4,4,0.5); height: 34px; width: 40px; line-height: 34px; display: table-cell;/* display: inline-block; also tried */ vertical-align: middle; text-align: center; float: right;}#image{ padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; border: none; }<div id="div"> <input type="image" id="image" /></div> in result, image is horizontally centred but not vertically, plz help. Link to comment Share on other sites More sharing options...
Ingolme Posted January 19, 2012 Share Posted January 19, 2012 Put the vertical-align property on the image instead of the div. Link to comment Share on other sites More sharing options...
jadsonlourenco Posted January 19, 2012 Share Posted January 19, 2012 There are several ways to do it you keep it centered. I advise you to make small CSS Sprite images and use them as BG;So it would be: #div{background: url(../images/icon.png) left center no-repeat;padding-left: 15px; / * The width of your image + 2px away from the text * /} or #div{background: url(../images/icon.png) 0 50% no-repeat;padding-left: 15px;} The second option you can set a value or% PX to position the image as it is now BG. This method is now standard, as you use Sprite and performance gains. Image within DIV only part of its contents, not the template of the site for SEO. Link to comment Share on other sites More sharing options...
jadsonlourenco Posted January 19, 2012 Share Posted January 19, 2012 Just completing what I said, I saw that you want to use it within an "input", then in the css you can give input to BG too.#div input{background ...}or#div input#name{background ...} Link to comment Share on other sites More sharing options...
sairfan1 Posted January 20, 2012 Author Share Posted January 20, 2012 i set the vertical-align property to input type image, but no results. jadsonlourenco i cant set it to background, and pedding-left, coz size of image amy change. Link to comment Share on other sites More sharing options...
dsonesuk Posted January 20, 2012 Share Posted January 20, 2012 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">#div { position:relative; background-color:#CCFF66; padding: 0; margin: 0; border: none; border-left: 2px solid red; height: 34px; width: 40px; text-align: center; float: right; }.middle {height:100%; display:table; margin:0 auto;}.inner {vertical-align:middle; display:table-cell;}#image{ padding: 0; margin: 0; border: none; }</style><!--[if lte IE 7]> <style> /* centering for ie6/ie7 */ .middle { position:absolute; top:50%; left:50%; height:auto;} .inner { position:relative; top:-50%; left:-50%; } </style><![endif]--></head><body><div id="div"><div class="middle"><div class="inner"> <input type="image" src="../images/exclaimation.gif" id="image" /></div></div></div></body></html> Link to comment Share on other sites More sharing options...
sairfan1 Posted January 21, 2012 Author Share Posted January 21, 2012 great, it works perfect. thank you very much. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.