Jump to content

Vertical alignment


ShadowMage
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;}

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