centering vertically

**droidus** · 08-24-2012 11:45 AM

I am having trouble vertically centering an image inside of a div. can anyone please provide an example?

**rtrethewey** · 08-24-2012 12:47 PM

I found a method of vertical centering on a site called dead Centre. You might give it a try.

**auntnini** · 08-24-2012 01:25 PM

See http://blog.themeforest.net/tutorial...ring-with-css/ for several ways to center vertically, http://www.jakpsatweb.cz/css/css-ver...-solution.html interesting info, http://www.vanseodesign.com/css/vertical-centering/, etc.

**simplypixie** · 08-26-2012 04:33 AM

If your containing div has a set height and all images are the same height, an easy solution is just to do a quick calculation of the space left and divide it by 2 to get the top margin/padding.

For example, if your containing div is a height of 140px and your images are all a height of 100px, that would leave a difference of 40px so your top margin would be 20px and then in your css:

Code:

.img-container {
  height: 140px;
  padding-top: 20px;
}
.img-container img {
  margin: 0;
  padding 0;
}

If your images are different heights then you would need a more complex calculation using javascript to then alter your containing div accordingly.

**coothead** · 08-27-2012 07:46 AM

Hi there droidus,

here is an example for you to try...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://www.coothead.co.uk/images/">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
#table {
    display:table;
    height:400px;
    padding:20px;
    margin:20px auto;
    border:1px solid #999;
    border-radius:10px;
    background-color:#fff;
    box-shadow:10px 10px 10px #666;
 }
#cell {
    display:table-cell;
    vertical-align:middle;
 }
#cell img {
    vertical-align:middle;
    border:1px solid #000;
    margin:0 10px;
    box-shadow:4px 4px 4px #999;
 }
</style>

</head>
<body>

<div id="table">
 <div id="cell">
  <img src="blood_thumb.jpg" alt="">
  <img src="girl.jpg" alt="">
  <img src="lace_thumb.jpg" alt="">
  <img src="aaa.jpg" alt="">
 </div>
</div>

</body>
</html>

coothead

**simplypixie** · 08-27-2012 07:48 AM

Originally Posted by coothead

Hi there droidus,

here is an example for you to try...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://www.coothead.co.uk/images/">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
#table {
    display:table;
    height:400px;
    padding:20px;
    margin:20px auto;
    border:1px solid #999;
    border-radius:10px;
    background-color:#fff;
    box-shadow:10px 10px 10px #666;
 }
#cell {
    display:table-cell;
    vertical-align:middle;
 }
#cell img {
    vertical-align:middle;
    border:1px solid #000;
    margin:0 10px;
    box-shadow:4px 4px 4px #999;
 }
</style>

</head>
<body>

<div id="table">
 <div id="cell">
  <img src="blood_thumb.jpg" alt="">
  <img src="girl.jpg" alt="">
  <img src="lace_thumb.jpg" alt="">
  <img src="aaa.jpg" alt="">
 </div>
</div>

</body>
</html>

coothead

Why suggest moving to tables for layout in this day and age???

**coothead** · 08-27-2012 07:59 AM

Hi there simplypixie,

Why suggest moving to tables for layout in this day and age???

Who has suggested this.

There are no tables in the code that I provided, other than the one preceded by a "#".

Perhaps a visit to the opticians may help your situation.

coothead

**simplypixie** · 08-27-2012 08:24 AM

My apologies, it is because you have called the divs 'table' - I just read it that you were formatting tables.

You are correct - I should be wearing my glasses

**coothead** · 08-27-2012 08:48 AM

Hi there simplypixie,

no problem, apology accepted.

I wouldn't normally use "#table" as an "id", but just thought
that it might be an aid to the O.P.'s original question.

coothead

Thread: centering vertically

Thread Tools

Display

centering vertically

other references

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions