Center img side by side

HTML & CSS
1

Hi

I have two problems in one of my pages that I am redoing

The more important is that I have tried everything and cannot center two images that I managed to put side by side. I introduced a new wrapping div around the images that solved the immediate problem but it seemed to conflict with the existing img-container, and now I can’t replicate it, anyway…

The other is the <h2> on top. I am usinf the same stylesheet as all other similar pages and in this one the text is right up against the top whan ir should have a big margin/padding.

The problem page is at http://pintotours.net/Lork/2BAR/TEMP.html

a similar good page is at http://pintotours.net/Asia/Indonesia/driving.html

2

The HTML page which is causing the problem has this as an embedded style (line 99):

.img-container img {float: left;}

Removing that fixes the issue for me.

Edit: BTW, on the “good” page you have a typo which is upsetting the HTML validator (line 377):

<p<A solution to avoid the traffic problems is to rent a car with a personal driver, which is a highly recommended option as the prices for this service are not exceptionally high.</p>

(<p< should be <p> at the start of that paragraph.)

1 Like
3

Hi TechnoBear

Many thanks

Too many typos…

The <h2> is solved, but the logos which now appear in the middle should be side by side.

4

If you want the images centred then you need rules like this.

.ad{text-align:center}
.ad a{
display:inline-block;
margin:0 10px;
}

Of course as you are using .ad elsewhere you may be better of adding a new class and using that class name instead of .ad in this instance.
e,g,

<div class="add img-center" ...
5

Hi Paul

many thanks, but I still got the images one on top of the other.

I’ve decided to copy the code from the current file http://pintotours.net/Asia/Indonesia/airport.html which I was trying to avoid because I thought I needed the img-container code for the images to be adaptable to mobiles.

But, it seems to work without it…

LATER

There is something I still do not understand. the file did not work with .ad{}; now it works with .adimg{} but they are IDENTICAL!

 div .ad {
    padding-top:20px;
    text-align:center;
    padding-bottom:10px;
    color:blue;    
 }
 

div .adimg {
    padding-top:20px;
    text-align:center;
    padding-bottom:10px;
    color:blue;    
 }

How come?

6

No the code I gave worked perfectly and was injected live into the page so I know it was working. You must have done something wrong.

Why are you doing this?

div .adimg

Are you guessing that the div .adimg is going to be inside another div?

It is a pointless rule and should simply be .adimg as shown in my example. If in a previous css rule you have said div.adimg or div .adimg then of course you will need to follow that very awkward format for reasons of specificity.

However it is pointless to qualify rules with div as that makes the browser work harder and also assumes a certain structure than may not always be present.

7

Things from the past I never quite understood…

I am sure, but you know me: I never get anything right first time!

It is working fine now withiout the img-container. Maybe I should leave as it is. Do you agree?

Thanks

8

If its working then don’t bother changing it but just try to understand the differences for next time :slight_smile:

9

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