Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- Put two DIVs side by side while keeping the image vertically centered


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


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>


Thread source:: http://www.webmasterworld.com/css/4475632.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com