Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Put two DIVs side by side while keeping the image vertically centered

Posted by: RainLover Jul 14 2012, 09:59 AM

Hi,

Sample:

CODE

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

Posted by: Frederiek Jul 14 2012, 12:12 PM

You can use margin:18px auto 0; on #left img.

Have look here too: http://css-discuss.incutio.com/wiki/Centering_An_Image

Posted by: Christian J Jul 14 2012, 12:47 PM

"vertical-align" only applies to elements with "display: table-cell" or -"inline".

Making both DIVs "display: table-cell" (with no float) should be the easiest solution, but older MSIE browsers don't support it.

If you prefer to float the DIVs they can't remain as "display: table-cell", but instead you can give the inline image vertical alignment with the help of an extra spacer image:

CODE

div {float: left;}

#left {
width:448px;
height:336px;
text-align: center;
}

#left #spacer {
height: 336px;
width: 1px;
vertical-align: middle;
}

<div id="left">
<img src="" alt="" id="spacer">
<img src="" alt="">
</div>

You can use a SPAN instead of the spacer image, but then you also need to make it "display: inline-block", which older Firefox/Gecko browsers don't support.

Posted by: Christian J Jul 14 2012, 12:48 PM

QUOTE(Frederiek @ Jul 14 2012, 07:12 PM)

You can use margin:18px auto 0; on #left img.

How would that work? Shouldn't you use much more top and bottom margin?

Posted by: RainLover Jul 15 2012, 12:06 AM

QUOTE(Christian J @ Jul 14 2012, 12:47 PM)

Making both DIVs "display: table-cell" (with no float) should be the easiest solution, but older MSIE browsers don't support it.

I design for IE8+.

QUOTE

If you prefer to float the DIVs they can't remain as "display: table-cell", but instead you can give the inline image vertical alignment with the help of an extra spacer image

I can't get it to work:
http://jsfiddle.net/yH8rA/1/

Posted by: Frederiek Jul 15 2012, 03:41 AM

QUOTE(Christian J @ Jul 14 2012, 07:48 PM)

QUOTE(Frederiek @ Jul 14 2012, 07:12 PM)

You can use margin:18px auto 0; on #left img.

How would that work? Shouldn't you use much more top and bottom margin?

No. The #left div has a height of 336px and the image is 300px high. That leaves 36px of space left, divided by 2 makes 18px.
With that, you don't need the extra markup for a spacer image.

Below, the modified (and commented) file from jsfiddle, which works for me in Safari/Mac. I haven't tried in IE as I don't have access to an IE.

CODE

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div {float: left;}
#left {width:448px; height:336px; text-align: center; background:black;}
/* #left #spacer {height: 336px; width: 1px; vertical-align: middle;} NOTE, width and height are in reversed order */
#left img {display:block; margin: 18px auto;} /* or margin: 18px auto 0; */
#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>

Posted by: RainLover Jul 15 2012, 03:46 AM

QUOTE(Frederiek @ Jul 15 2012, 03:41 AM)

The #left div has a height of 336px and the image is 300px high. That leaves 36px of space left, divided by 2 makes 18px.

Thanks for the answer, but adding a top and bottom margin to the image doesn't resolve the issue as the large image height isn't fixed. It's an image gallery where clicking any thumbnail displays a different image with a different size in the left division

Posted by: Frederiek Jul 15 2012, 05:46 AM

You hadn't said before the images will not be the same size.

Have you taken a look at the two links from http://css-discuss.incutio.com/wiki/Centering_An_Image ? Do the included samples there work for you?

Posted by: Christian J Jul 15 2012, 06:44 AM

QUOTE(RainLover @ Jul 15 2012, 07:06 AM)

I design for IE8+.

Then "display: table-cell" should be fine.

QUOTE

I can't get it to work:
http://jsfiddle.net/yH8rA/1/

Oops, you need to remove this part also:

CODE

#left img {display:block; margin:0 auto;}

(the "display: block" is what's causing trouble, also the margin is no longer needed).

You also need to make the preview window wide enough for the two floated DIVs to fit side by side.

Posted by: Christian J Jul 15 2012, 06:48 AM

QUOTE(Frederiek @ Jul 15 2012, 10:41 AM)

QUOTE(Christian J @ Jul 14 2012, 07:48 PM)

How would that work? Shouldn't you use much more top and bottom margin?

No. The #left div has a height of 336px and the image is 300px high.

I see. I never looked at the actual image file.

Posted by: RainLover Jul 15 2012, 09:12 AM

QUOTE(Christian J @ Jul 15 2012, 06:44 AM)

Oops, you need to remove this part also:

CODE

#left img {display:block; margin:0 auto;}

(the "display: block" is what's causing trouble, also the margin is no longer needed).

I tried it to no luck:
http://jsfiddle.net/yH8rA/5/

The image isn't vertically centered.

Posted by: RainLover Jul 15 2012, 09:18 AM

QUOTE(Frederiek @ Jul 15 2012, 05:46 AM)

Have you taken a look at the two links from http://css-discuss.incutio.com/wiki/Centering_An_Image ? Do the included samples there work for you?

Yes: it's a fairly complicated workaround to support older browsers.

Posted by: Christian J Jul 15 2012, 12:43 PM

QUOTE(RainLover @ Jul 15 2012, 04:12 PM)

I tried it to no luck:
http://jsfiddle.net/yH8rA/5/

The image isn't vertically centered.

Oops again, seems both images need to be vertically centered:

CODE

#left #spacer {
vertical-align: middle;
height: 336px;
width: 1px;
}

#left #pic {
vertical-align: middle;
max-width: 400px;
max-height: 330px;
}

<div id="left">
<img src="foo.jpg" alt="" id="spacer">
<img src="bar.jpg" alt="" id="pic">
</div>

Note that the spacer image needs a valid URL, otherwise Firefox will collapse its dimensions. Also, if the large image in the left DIV is too large the layout may fall apart. Perhaps giving it some max-height/width will help.

The "display: table-cell" method seems both simpler and more fluid...

Posted by: RainLover Jul 15 2012, 01:01 PM

QUOTE(Christian J @ Jul 15 2012, 12:43 PM)

The "display: table-cell" method seems both simpler and more fluid...

Thanks, Christian!