Images not centred

HTML & CSS
1

Hi

I’m unable to centre three images within the space available. I tried to introduce conditionals for the div .ad targeting text-align:center and margin auto but nothing worked. Since wrapping the images in the div img-container, the images went vertical and when I narrow the screen they blow up into an enormous size!

It’s getting late here and my brain is getting very slow. I’m sure I am makinga very basic mistake.

The page, which is live is http://pintotours.net/Asia/India/currentIndia.html

Thanks

2

Well you have extra markup you don’t need, but the easiest is to simply do the following

On .img-container remove the width:100%; and add in display:inline-block; They should all be on the same line now.

Now, since those divs are inline-block, they can be centered via text-align:center; on the parent. So on .ad let’s go add text-align:center;

3

Hi Ryan

You are referring to the conditionals in html, right?

4

No.

5

YES!!!

Magic!

The stylesheet is being used on over 50 pages. i have to make the changes locally. I got it to work with your code, but
have a doubt.

If I take out the width:100% it will still be width 100% from the css. I did this in the conditional and it seems to work

 .img-container{
	width:auto;/* adjust to suit*/
	display:inline-block;
}
.ad{
text-align:center;
}
6

Hi Ryan

As you did not comment and it works fine, I’ll leave it as it is.

Many thanks. I can sleep in peace now!

7

I feel like if I start giving code advice then I’ll ramble on all day. I do believe your entire website needs a little cleaning up and consolidating. However, it works, and that is good enough for me.

Cheers.

8

A little??? Thanks for the compliment!

9

Someone has to say it :stuck_out_tongue: don’t shoot the messenger.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.