1. Home
  2. Forums Index
  3. Browser Side / CSS 12:15 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Put two DIVs side by side while keeping the image vertically centered

         

Rain_Lover

3:17 pm on Jul 14, 2012 (gmt 0)

10+ Year Member Top Contributors Of The Month



Hi,

Sample: 

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#left {display:table-cell; width:448px; height:336px; vertical-align:middle; background:black;}
#left img {display:block; margin:0 auto;}
#right {width:97px; height:326px; padding:5px; overflow-x:hidden; overflow-y:auto; background:black;}
</style>
</head>
<body>
<div id="left"><img src="http://dl.dropbox.com/u/4017788/Labs/image2.jpg" alt=""></div>
<div id="right">
  <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
  <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
  <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
  <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
  <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
  <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
  <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
  <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
  <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>


If I use div {float:left;}, the large image won't be vertically centered any more. What's the solution?

Many thanks in advance!
Mike

Paul_o_b

7:26 pm on Jul 15, 2012 (gmt 0)

10+ Year Member



Hi,

Assuming you don't want to change the html and also assuming that you don't care about less than IE8 (as you have used display:table-cell) then you could do it like this: 


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#left {
float:left;
width:448px;
height:336px;
line-height:336px;
background:black;
text-align:center;
}
#left img {
display:inline;
vertical-align:middle;
}
#right {
width:97px;
height:326px;
padding:5px;
overflow-x:hidden;
overflow-y:auto;
background:black;
}
</style>
</head>
<body>
<div id="left"><img src="http://dl.dropbox.com/u/4017788/Labs/image2.jpg" alt=""></div>
<div id="right"> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a> <a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a> </div>
</body>
</html>

Rain_Lover

7:55 pm on Jul 15, 2012 (gmt 0)

10+ Year Member Top Contributors Of The Month



I'm really happy you finally showed up! Hope you had a great holiday! :)

If you remember we already discussed a similar image gallery where the large image appeared in the background. I had no problem centering the background image. But in this new gallery, the large image is a real HTML element as I want to put a caption under each large image and I couldn't do it with a background image.
Your solution has a little problem: the image isn't completely vertically centered. If you pay attention, it's closer to the bottom and further than the top of the container.

Rain_Lover

7:57 pm on Jul 15, 2012 (gmt 0)

10+ Year Member Top Contributors Of The Month



Assuming you don't want to change the html


Yes. I'd prefer not to add HTML elements, but If it's a must, then why not?

Paul_o_b

8:22 am on Jul 16, 2012 (gmt 0)

10+ Year Member



Yes had a good holiday thanks.

If you don;t mind changing the html then the best option is to just add a wrapper like this: 


<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#left{float:left}
#left span{display:table-cell; width:448px; height:336px; vertical-align:middle; background:black;}
#left img {display:block; margin:0 auto;}
#right {width:97px; height:326px; padding:5px; overflow-x:hidden; overflow-y:auto; background:black;}
</style>
</head>
<body>
<div id="left"><span><img src="http://dl.dropbox.com/u/4017788/Labs/image2.jpg" alt=""></span></div>
<div id="right">
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb2.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb3.jpg" alt=""></a>
<a href="#"><img src="http://dl.dropbox.com/u/4017788/Labs/thumb1.jpg" alt=""></a>
</div>
</body>
</html>


That should avoid the alignment problem of the other method.

Rain_Lover

10:01 am on Jul 16, 2012 (gmt 0)

10+ Year Member Top Contributors Of The Month



Thanks a lot! :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 12:15 pm May 1, 2026