Hi

 

Ok so simply put I have a 100% width Div with <img..> inside. The image width is 698px, though that shouldn't make any difference. This is what I've got.

 

<div class="col-md-12" >

<a class="logo" href="#"><img src="images/old_elm.png" alt="Special Occasion Cars. Chauffeur driven cars london." style="display: block; margin:0 auto;"></a>

</div>

 

What I need is that the <img...> sits in the center horizontally. Of course the code just defaults the image to the left.

 

I know I'm going mad, I've done this before, I just can't get it to do what I what it to do. arrggg.

 

Anyone reminder me hows this done done please?

Put text-align: center on whatever element is wrapping the image.

An image, by default acts exactly the same as an inline-block element, which responds to the text-align property on it's parent.

<div class="col-md-12" style="text-align:center;">
<a class="logo" href="#"><img src="images/old_elm.png" alt="Special Occasion Cars. Chauffeur driven cars london."></a>
</div>

 

No change I'm afraid.

It's hard to see just looking at your HTML there.

 

what are the display properties of the anchor that is wrapping the image? if that has display block and width:100% then your text-align center should go on that

 

Could you put up a live version or put it on Codepen so we can give to a better answer?

Edited October 3, 201510 yr by rbrtsmith

Is that bootstrap you are using? if so, try using the class "text-center" which is bootstraps native class

yes bootstrap.

 

Worked it out the div was inside another div that was floating to the left. Much appreciated.

Edited October 3, 201510 yr by Acknowledged74

mention the screen resolution size even mobile and tab and give element value text-align:center;