How to properly align images in line?

HTML & CSS
1

Another question from me regarding alignment of images. Please have a look on attached screenshot:

As you can tell from it, images are not aligned properly, although titles are. I want to align images and it is not important for me if titles will be like images are now. I think I need to insert a CSS element after title and before image for this to work but I am most likely wrong.

There are 3 columns on page. Here’s how code looks approximately for 1st column where there are 3 pictures (each below previous) under title:

[one_third]
title
linked image 1
linked image 2
linked image 3
[/one_third]

Appreciate you help!

2

Try this:

http://www.johns-jokes.com/downloads/sp-c/sprites/index.php

Scroll to the bottom for the source code.

I used the your image as a sprite.

3

I am confused about what you want. do you mean you want the TOP of the images to line up with each other, as in a table layout? I that the case , your really can’t do that. the closest you might come will be to decide on a common height for the titles, preferably in ems, for scalability.


<div class="wrap">
<div class="col">
<h2>Title</h2>
<div class='imgShell>
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
 </div>
</div>
</div>
.col { float:left; width:33.333%;} 
.wrap { overflow:hiden;} 
. imgShell img { display:block;}
. col  h2 {height: 4em;}
4

Thanks but I need images separated because each will point to specific URL. What you made seems like combining of all images into one?

Thanks. You can see from my screenshot that titles are aligned well but images are not. That’s what I want to do with images even if titles won’t be aligned anymore like they were initially.

So you mean I can’t put images in table and align their tops and above that table put aligned titles?
What if I use HTML positioning parameter example - top:35px right:50px? Would images be still properly placed if viewing in different browser like IE?

5

Thanks. You can see from my screenshot that titles are aligned well but images are not. That’s what I want to do with images even if titles won’t be aligned anymore like they were initially.

the reason for the misalignment on your images is because the height of all your titles are different. Remember , title 1 does NOT communicate its height to title2 , and so forth… You might be tempted to just make a ROW of titles, and the rows of images, but that might not make SEMANTIC since even if it allows you do you your layout.

if the DATA is tabular , then using tables is ok. Remember that in web design what you MEAN TO SAY is way more important than how you are trying to make it look. (in other words don’t put things in tables JUST because it makes laying out stuff ‘easy’) but from what I see what you are meaning to have is a list categories/sample pictures ( but i could be mistaken about the meaning of you content)

What if I use HTML positioning parameter example - top:35px right:50px? Would images be still properly placed if viewing in different browser like IE?

#1) you would need to add ‘position:relative’;
#2) relative position only affects where the element is DISPLAYED but not how its size with the other elements ( in other words , you will have the same issue PLUS now you might have odd ‘empty’ gaps.

perhaps this QUICK example while show what I mean:


<style>
.col { float:left; width:33.333%; } 
.wrap { overflow:hiden;} 
 .imgShell img { display:block;  width:350px; height:150px; margin:0 auto }
.col  h2 {height: 3em;}
.wrap {outline:1px solid red; overflow:hidden;}
</style>
<div class="wrap">
<div class="col">
<h2>Title one short title</h2>
<div class='imgShell'>
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
 </div>
</div>

<div class="col">
<h2>Title one short title a much much longer title </h2>
<div class='imgShell'>
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
 </div>
</div>

<div class="col">
<h2>Title one short title a much much longer title this one wraps more </h2>
<div class='imgShell'>
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
 </div>
</div>
</div>

hope that helps

6

Updated using images and links:

http://www.johns-jokes.com/downloads/sp-c/sprites/index.php

Also added the page suggested by @dresden_phoenix;

7

You can see this link. It provide best example to align images in inline

http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div

8

I don’t think that really addresses the original question and is a very old technique that is better documented here anyway :).