Vertical alignment

[ShadowMage]

I'm having some difficulties getting a div to vertically center itself. The following snippet of HTML is generated by java script:

<div class="custom_dialog" id="custom_dialog" style="display: block;">	<div class="custom_dialog_overlay"></div>	<div class="custom_dialog_container" style="top: 30%; left: 35%;">		<div class="custom_dialog_shdw"></div>		<div class="custom_dialog_title">Alert</div>		<div class="custom_dialog_content_wrap">			<div class="custom_dialog_img custom_dialog_alert_img"></div>			<div class="custom_dialog_content">Error Msg</div>		</div>		<div class="custom_dialog_button_wrap">			<button class="custom_dialog_btn">Ok</button>		</div>	</div></div>

The div I'm trying to center is this one:<div class="custom_dialog_img custom_dialog_alert_img"></div>No matter how hard I try, I can't get it to be vertically centered. Here's relevant CSS:

div.custom_dialog div.custom_dialog_container div.custom_dialog_content_wrap {	background-color: #ECECEC;	color: #000000;	font-size: 11pt;	text-align: center;	border-bottom: 2px groove #003399;	padding: 0px 3px 3px;	position: relative;	z-index: 1;	overflow: auto;}div.custom_dialog_content_wrap div.custom_dialog_content {	max-width: 500px;	text-align: left;	/*display: inline-block;*/	overflow: auto;	/*line-height: 20px;*/}div.custom_dialog_content_wrap div.custom_dialog_img {	float: left;	/*display: inline-block;	line-height: 20px;*/	width: 36px;	/*height: 100%;*/	height: 36px;	margin-right: 7px;	/*margin-top: auto;	margin-bottom: auto;*/	vertical-align: middle;}div.custom_dialog_img.custom_dialog_alert_img {	background: url(images/alert.png) no-repeat;}div.custom_dialog_img.custom_dialog_info_img {	background: url(images/info.png) no-repeat;}div.custom_dialog_img.custom_dialog_prompt_img {	background: url(images/prompt.png) no-repeat;}

Anything not in comments is my original code. The commented stuff is the many things I've tried to get it to work. Somebody help me please?

[dsonesuk]

I'm not sure if you are looking for fixed in middle of screen option, but the one i use is the one from http://simon.html5.org/sandbox/css/center-fixed its aways worked for me, and not a bit of js in sight.

[ShadowMage]

I'm not sure if you are looking for fixed in middle of screen option, but the one i use is the one from http://simon.html5.org/sandbox/css/center-fixed its aways worked for me, and not a bit of js in sight.

No I'm just looking for the image div to be vertically centered within the content-wrap div.

[ShadowMage]

For grins I tried the method used in the link you provided, and it works! Almost...In FF when the size of the message is really small the image div gets smaller than it's supposed to. (For example if the content has a one line sentence)The min-height doesn't seem to do anything....Here's my new CSS:

div.custom_dialog div.custom_dialog_container div.custom_dialog_content_wrap {	border-bottom: 2px groove #003399;	display: table;}div.custom_dialog_content_wrap div.custom_dialog_content {	max-width: 500px;	text-align: left;	display: table-cell;	overflow: auto;}div.custom_dialog_content_wrap div.custom_dialog_img {	display: table-cell;	width: 36px;	margin-right: 7px;	background-position: center;	min-height: 36px;}

In IE it's just fine, which reminds me....on the CSS display page of W3Schools it says that display: table and display: table-cell (amongst many others) are not supported by IE, yet they work perfectly in IE8. This should be updated.

[ShadowMage]

I got it working! What I ended up doing was adding an extra div inside the image div to actually hold the image:

<div class="custom_dialog" id="custom_dialog" style="display: block;">	<div class="custom_dialog_overlay"></div>	<div class="custom_dialog_container" style="top: 30%; left: 35%;">		<div class="custom_dialog_shdw"></div>		<div class="custom_dialog_title">Alert</div>		<div class="custom_dialog_content_wrap">			<div class="custom_dialog_img custom_dialog_alert_img">				<div></div> //Added this div			</div>			<div class="custom_dialog_content">Error Msg</div>		</div>		<div class="custom_dialog_button_wrap">			<button class="custom_dialog_btn">Ok</button>		</div>	</div></div>

And used the following CSS:

div.custom_dialog div.custom_dialog_container div.custom_dialog_content_wrap {	border-bottom: 2px groove #003399;	display: table;}div.custom_dialog_content_wrap div.custom_dialog_content {	max-width: 500px;	text-align: left;	display: table-cell;	overflow: auto;}div.custom_dialog_content_wrap div.custom_dialog_img {	display: table-cell;	width: 36px;	margin-right: 7px;	vertical-align: middle;}div.custom_dialog_img .custom_dialog_alert_img, div.custom_dialog_img .custom_dialog_info_img, div.custom_dialog_img .custom_dialog_prompt_img {	background-position: center;	width: 36px;	height: 36px;}div.custom_dialog_img .custom_dialog_alert_img {	background: url(images/alert.png) no-repeat;}div.custom_dialog_img .custom_dialog_info_img {	background: url(images/info.png) no-repeat;}div.custom_dialog_img .custom_dialog_prompt_img {	background: url(images/prompt.png) no-repeat;}