Getting a logo to sit in the middle [responsive design]

HTML & CSS
1

Hi

I have a logo which sits on the top left of my container in desktop to large viewports.


<a href="../index.php" class="active"><img src="../images/logo.png" width="200" height="35" alt="Logo" class="logo"></a>
 


        img.logo {
	margin-top:10px;
	margin-bottom:10px;
	border:none;
        }

I want to use media queries to centre this logo when viewed in phone / tablet sized viewports.

How would I do this? I have a workaround at the moment which is swaps out the img.logo for a roughly centred div (not quite right), it’s certainly not ideal.

Any help would be much appreciated on best practice.

2

See the following pen for a demo, since you know the width of the image you can simply use a left offset then pull it back with a margin which will work in any browser.

http://codepen.io/ChrisUpjohn/pen/EBJIj

3

An alternative would be to just set the img.logo to display as block (images display inline as default) and use the auto margins. This allows you to use different size logos depending on your display, and you don’t need to worry about the image size.

img.logo { display:block; margin: 10px auto; border: none; }

4

Yes, and if that image is in a block level container like a div, you could also set the div to width: 100% and text-align: center, which should also center the image.

SO many options. :slight_smile:

5

of course! thanks

I had it set to float left in my large viewport window. Sorted now! :lol::smiley:

Cheers