Vertical-align not working

HTML & CSS
1

I’ve checked all over the net and in this forum with search but I can’t find an answer. It seems like I’m using vertical-align right in my css but it’s just not working. Here is my css:

.models {
width: 38em;
height: 6.5em;
background-color: #4F0000;
color:#FFF;
font-size:.8em;
padding:4px 4px 4px 4px;
margin-bottom: 6px;

}
img.models {
vertical-align:middle;
}

HTML:
<div class=“models”>
<img src=“myimage.png” width=“80” height=“60” alt=“description” />
</div>

Is there some issue with my models class that is interfering? Or am I using align the wrong way? Sorry if this seems like a dumb question but I can’t figure it out.

2

I figured out that valign only applies to text with an image. What I want to do is center the image vertically inside the div tag. I’m out of ideas obviously.

3

one way to do it

 
<!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">
<head>
<title></title>
<style type="text/css">

.models {
width: 38em;
height: 6.5em;
background-color: #4F0000;
color:#FFF;
font-size:.8em;
padding:4px 4px 4px 4px;
margin-bottom: 6px;
position: relative;
}

.models img {
position: absolute;
top: 50%;
margin-top: -30px /* half of image height */
}
 
</style>

</head>
<body>
 
<div class="models">
      <img src="pic1.jpg" width="80" height="60" alt="description" />
</div>
 
</body>
</html>
4

Kalon’s solution will work, but it’s case specific; you must set the negative margin for each image size. For a general solution,

<!DOCTYPE html>
        
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>test document</title>
  
  <style type="text/css">

.models {
  background-color: #4F0000;
  color: #FFF;
  display: table;
  font-size: .8em;
  height: 6.5em;
  margin-bottom: 6px;
  padding: 4px;
  text-align: center;
  width: 38em;
  }

.models span {
  display: table-cell;
  vertical-align: middle;
  }

  </style>
  
</head>
<body>
  <div class="models">
    <span><img src="pic.gif" width="80" height="60" alt="description" /></span>
  </div> 
</body>
</html>

That solution won’'t work with IE<8, so for the IE6/7 work-around, see Vertical Centering of Inline Elements.

cheers,

gary

5

yes that’s true. normally, unless instructed otherwise, I would use js to set the top margin for the relevent images which means that javascript disabled browsers would still see the images, but they wouldn’t be centered vertically.

btw - I copied and pasted your code and ran it in my IE8. the image is centered horizontally but not vertically.

6

Odd; it works for me in IE8/9, and not (as expected) in IE7. Do you have IE in compatibility mode?

cheers,

gary

7 

<!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></title>
<style type="text/css">
.box{ width:200px; height:200px; position:relative; background:#CCC; display:table-cell; text-align:center; vertical-align:middle;}
.box .imgBox{ position:static; +position:absolute; top:50%}
.box .imgBox img { position:static;  +position:relative; top:-50%;left:-50%;}
</style>
</head>
<body>
<div class="box">
	<div class="imgBox"><img src="img.png" /></div>
</div>
</body>
</html>

Do you mean it?

8

It works perfectly in all browers, “+” fixed for iE6 and IE7

9

Yes works fine for me also in IE8:)

10

It’s working ok in my IE8 now.

I don’t have the original file anymore, but I just recopied and pasted your code and this time opened it on my xampp local server in IE8 and the image centres horizontally and vertically.

but I do know that when I first tried it earlier in IE8 I didn’t open the file on my xampp. I just double clicked the html file and it opened in my IE8. I suspect now that I most probably didn’t copy and paste it correctly.

sorry about that :frowning:

11

Don’t worry, it happens to all of us :slight_smile:

12

Hack,hack, cough. Speak for yourself. The number of my errors is equal to the number of times I have been falling down drunk; none, that I can remember. :wink:

cheers,

gary