Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Horizontal centering for a responsive layout

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #37735
    Konnor
    Member

    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….

    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?

    #101578
    chrisburton
    Participant

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

    #101590
    Konnor
    Member

    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.

    #101594
    chrisburton
    Participant

    Then you would need to use media queries.

    #101618
    Konnor
    Member

    @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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.