Full-Demon Posted June 9, 2007 Share Posted June 9, 2007 Hi, How can I position a certain image (120x90 px) in the vertical center of a div with a unknown height? Example of how it should look like: So, on the left the picture (which must be clickable, surrounded by <a>), and on the right the text which can be of any height. The image should be in the vertical middle of the total height. The whole div should have a background-color... Thats it, and I cant get it fixed, even after searching the web...:S Thanks, Daevius PS: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Gallery</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div style="margin-top:4px; margin-bottom:4px;"> <div class="image_thumbnail_directory" style="float:left; width:120px; height:100%; background-color:#ff0000;"> <a href="barcelona" style="display:block; vertical-align:middle;"> <span class="image_thumbnail_directory" style="width:120px; height:160px; display:block; background-position:center; background-image:url('gallery/Barcelona/IMG_0105_120px.jpg');"></span> </a> </div> <div style="background-color:#f8f8f8; width:400px;"> <div style="padding-top:4px; padding-bottom:4px; margin-left:128px; margin-right:8px;"> <div style="font-weight:bold; margin-bottom:4px;">Title:</div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dapibus tortor et elit. Sed posuere, mi in cursus consequat, odio odio tincidunt justo, quis interdum quam neque id lectus. Nunc in orci. Nullam neque orci, tempor nec, luctus ac, bibendum vitae, nisi. Phasellus id orci et leo eleifend consequat. Maecenas faucibus tortor malesuada libero. Suspendisse eget sem vel justo varius volutpat. Proin a metus eget mauris hendrerit placerat. Aliquam molestie, augue sed posuere feugiat, libero urna cursus mauris, vitae tincidunt lectus ante vitae turpis. Nullam non purus. </div> </div> </div><div style="margin-top:4px; margin-bottom:4px;"> <div class="image_thumbnail_directory" style="float:left; width:120px; height:100%; background-color:#ff0000;"> <a href="spain" style="display:block; vertical-align:middle;"> <span class="image_thumbnail_directory" style="width:120px; height:160px; display:block; background-position:center; background-image:url('gallery/Spain/100_0058_120px.jpg');"></span> </a> </div> <div style="background-color:#f8f8f8; width:400px;"> <div style="padding-top:4px; padding-bottom:4px; margin-left:128px; margin-right:8px;"> <div style="font-weight:bold; margin-bottom:4px;">Title:</div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dapibus tortor et elit. Sed posuere, mi in cursus consequat, odio odio tincidunt justo, quis interdum quam neque id lectus. Nunc in orci. Nullam neque orci, tempor nec, luctus ac, bibendum vitae, nisi. Phasellus id orci et leo eleifend consequat. Maecenas faucibus tortor malesuada libero. Suspendisse eget sem vel justo varius volutpat. Proin a metus eget mauris hendrerit placerat. Aliquam molestie, augue sed posuere feugiat, libero urna cursus mauris, vitae tincidunt lectus ante vitae turpis. Nullam non purus. </div> </div> </div><div style="margin-top:4px; margin-bottom:4px;"> <div class="image_thumbnail_directory" style="float:left; width:120px; height:100%; background-color:#ff0000;"> <a href="venice" style="display:block; vertical-align:middle;"> <span class="image_thumbnail_directory" style="width:120px; height:160px; display:block; background-position:center; background-image:url('gallery/Venice/101_0132_120px.jpg');"></span> </a> </div> <div style="background-color:#f8f8f8; width:400px;"> <div style="padding-top:4px; padding-bottom:4px; margin-left:128px; margin-right:8px;"> <div style="font-weight:bold; margin-bottom:4px;">Title:</div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum dapibus tortor et elit. Sed posuere, mi in cursus consequat, odio odio tincidunt justo, quis interdum quam neque id lectus. Nunc in orci. Nullam neque orci, tempor nec, luctus ac, bibendum vitae, nisi. Phasellus id orci et leo eleifend consequat. Maecenas faucibus tortor malesuada libero. Suspendisse eget sem vel justo varius volutpat. Proin a metus eget mauris hendrerit placerat. Aliquam molestie, augue sed posuere feugiat, libero urna cursus mauris, vitae tincidunt lectus ante vitae turpis. Nullam non purus. </div> </div> </div></body> </html> PSS: Yes, the css is inline, but I will put that in an external file later... Quote Link to comment Share on other sites More sharing options...
AndyB Posted June 9, 2007 Share Posted June 9, 2007 hmmm .... that certainly looks like tabular data. And the best way to display tabular data is - no surprise - a table. That would make your alignment coding task much simpler as well as making your code semantically correct. Sorry, I think CSS is the wrong solution for this problem. Quote Link to comment Share on other sites More sharing options...
Full-Demon Posted June 9, 2007 Author Share Posted June 9, 2007 Ok thanks andy. Table always works, I was trying to do everything with CSS, but it seems that thats not always possible. Full-D Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted June 10, 2007 Share Posted June 10, 2007 look like a list to me! tabls suck ass. Quote Link to comment Share on other sites More sharing options...
AndyB Posted June 10, 2007 Share Posted June 10, 2007 It might look like a list, but it's two pieces of related data so I'd say that it meets the table definition. A list is an optional list item identifier and a single piece of data unrelated to the list identifier except as a convenience. Agreed that tables suck - for layout. If CSS floats your boat for this, then use floats - http://css.maxdesign.com.au/floatutorial/ Quote Link to comment Share on other sites More sharing options...
Loran Posted June 10, 2007 Share Posted June 10, 2007 Jw...couldn't you use something like.. For the image on the left.. .imgcenter {margin-top: auto; margin-bottom: auto;} shouldn't auto margins automatically stick it in the middle.. Thought this might be easier, but if you were going to change all the inline styles to an external sheet, then why wouldn't you put all CSS in <style> tags...you just have to cut and paste one block instead of going through the whole sheet and cutting and pasting several times... Just a personal preference though Quote Link to comment Share on other sites More sharing options...
Full-Demon Posted June 10, 2007 Author Share Posted June 10, 2007 The margins didnt work for images, sadly... As for CSS, the browser caches external sheets... And: internal or external, its the same! Except the internal is between head and style tags and external is called by a link tag. It shouldnt be more copy pasting...should it? Thanks for the replies though, and yes, I hate tables but its faster and easier to make . And when something is nearly impossible..... Full-D Quote Link to comment Share on other sites More sharing options...
calabiyau Posted June 10, 2007 Share Posted June 10, 2007 Vertically centering is very difficult with CSS. You are better off to go with a table solution for this. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.