Centered Vertical Alignment within a DIV [Archive]

View Full Version : Centered Vertical Alignment within a DIV

srlagarto

Mar 16th, 2009, 12:24 PM

Hi, there.

Having looked around the forum for a CSS method of vertically centering an IMG within a DIV, I found the following code which works perfectly in IE but not FF :

#full-image {
float: right;
width: 380px;
height: 380px;
text-align: center;
line-height: 0px;
background-color: #F0F5F7;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 10px;
}

#full-image img {
margin-top: expression(( 380 - this.height ) / 2);
}

That's right - works in IE but not FF, which is most unusual! Any ideas how to make this work cross-browser? Thanks in advance for any assistance.

effpeetee

Mar 16th, 2009, 01:37 PM

Hello srlagarto .

Try this site. (http://www.wpdfd.com/editorial/thebox/deadcentre4.html)

Also look in the Sources program (http://exitfegs.co.uk/Sources.html)in my signature - middle column.- 25 to 28.

Frank

PS Please put your code in the code tags - use the # sign at the top of the entry page'
Also you will get more help if you include all the page code; HTML as well as CSS.

#full-image {
float: right;
width: 380px;
height: 380px;
text-align: center;
line-height: 0px;
background-color: #F0F5F7;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 10px;
}

#full-image img {
margin-top: expression(( 380 - this.height ) / 2);
}

abduraooft

Mar 16th, 2009, 02:11 PM

expression(( 380 - this.height ) / 2);
expression() (http://msdn.microsoft.com/en-us/library/ms537634.aspx) is IE's proprietary, so don't expect it to be accepted by others.

Could you post a link to your page or the complete html+css including the dimensions of your images?

BoldUlysses

Mar 16th, 2009, 02:12 PM

margin-top: expression(( 380 - this.height ) / 2);

expression must be an IE-proprietary value for margin.

By default images are inline elements (http://www.highdots.com/css-editor/html_tutorial/inline.html), which means that you can use the line-height method of centering them within a div (described here (http://phrogz.net/CSS/vertical-align/index.html)). Here's a test page (http://www.sufferndesign.com/helping/site162.html) I made that shows how images can be centered both directions in a div, assuming you can give the div a set height. Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Page Title Goes Here</title>

<style type="text/css">

* {
padding:0;
margin:0;
}

ul {
list-style-type:none;
margin:10px;
}

li {
margin-bottom:5px;
}

a {
display:block;
width:200px;
height:125px;
line-height:125px; /* must equal container height to vertically center an inline element */
text-align:center;
border:1px solid #f00;
}

img {
vertical-align:middle; /* this works because it's being used, again, on an inline element */
}

</style>

</head>

<body>

<ul>
<li><a href="#"><img src="1.jpg" alt="image" title=""/></a></li>
<li><a href="#"><img src="2.jpg" alt="image" title=""/></a></li>
<li><a href="#"><img src="3.jpg" alt="image" title=""/></a></li>
<li><a href="#"><img src="4.jpg" alt="image" title=""/></a></li>
</ul>

</body>
</html>

I used list and link tags but the method applies just as well to divs. The critical bits of code are highlighted.

student101

Mar 16th, 2009, 02:44 PM

http://www.css-zibaldone.com/test/css21/absolute/centered-boxes/index.html

http://www.brunildo.org/test/vertmiddle.html