Forums

Konnor

I'm playing around with media queries but am struggling to work out how to center div's horizontally.

It looks allot nicer, especially when you get down phone browser sizes if some elements such as the navigation are centered.

My markup is....

<div id="header">

	<div class="cAlign">
	
		<ul id="socialMedia">
			<li><a class="twitter" href="#">Join us on Twitter</a></li>
			<li><a class="facebook" href="#">Join us on Facebook</a></li>			
	 	 </ul>
			
		<h1><a href="index.html">Chilli Con Salsa</a></h1>
			
		<ul id="navBar">
			<li><a class="red" href="index.html">home</a></li>
			<li><a class="redOrange" href="blog.html">blog</a></li>
			<li><a class="orange" href="lessons.html">lessons</a></li>
			<li><a class="yellowOrange" href="gallery.php">gallery</a></li>
			<li><a class="yellow" href="#">contact</a></li>
		</ul>
		
	</div>
		
</div><!-- End Header -->

cAlign is my wrapper class. I use this as I need a full width repeating background image for header

At the moment socialMedia is floated right, h1(logo) is floated left, and navBar is floated right

How would I go about centering any/all of these?

chrisburton

Can you post your CSS so we know what the layout looks like or post it on http://jsfiddle.net

Konnor

Sure.

http://jsfiddle.net/p2m6n/4/

Easier to see full screen....

http://jsfiddle.net/p2m6n/4/embedded/result/

Ideally I would like everything centered with smaller widths.

chrisburton

Then you would need to use media queries.

AndyHowells

Yes if you want it to change layout on screensize then mediaqueries are basically the way to go.

Once you decide on your media query breakpoint you can effectively over-ride the earlier CSS with new parameters.

You could use a variety of display: block; and margin: 0 auto; to center the elements you want.

Konnor

@ChristopherBurton It's how to do the centering I'm struggling with.

Trying something like...

ul#navBar {           
        display: block;        
        clear: both;
        float: none;    
        margin: 0 auto;
    }

...To no avail.

could be something to do with the fluid layout.

treehouse : what would you like to learn today?

Forums

Horizontal centering for a responsive layout