Jump to content

How to vertical-align Input type image in a div


sairfan1
 Share

Recommended Posts

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.

Edited by irfan ullah
  • Like 1
Link to comment
Share on other sites

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

<!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>

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...