How can I center my ul li list inside my div?


Tags: html,css

Problem :

I have the following page http://jsfiddle.net/Leytgm3L/18/ and as you can see there are 6 links to different cities. I put a following css:

.cities-main  li {
        float: none;
        display: inline-block;
        text-align: center;
        margin-right: 10%;
        list-style: none;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 18px;
    }

to spread this list horizontally, but the problem is that it's not center inside the main div... How can I do that?



Solution :

Try adding these rules:

.cities-main{ padding: 0; text-align: center; }
.cities-main > li:last-child{ margin-right: 0; }

By doing so, the last link won’t break into a new line due to its margin-right. Also, the first link will be on the left border of its parent element. And altogether their centered.

Here’s a fiddle with it: http://jsfiddle.net/04z3L5gs/


    CSS Howto..

    How to get same height to two sibling buttons

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    How to justify 4 divs in one row [duplicate]

    How to add footer to the bottom of the page

    How to centre and make responsive a row of divs

    How to correctly redefine the CSS settings for FireFox?

    How to create a CSS box link without using display: block

    How to make css jQuery thumbnail slides loop

    How to prevent IE from loading hidden content using HTML/CSS only?

    How to create a image frame by css?

    How to get the text in the custom dialog to be centered vertically

    Extend page content in height or show white background under content

    Keyboard Showed messed up elements' position

    How to load Angular.js form to jsFiddle?

    how to load the dynamically changed css file

    Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

    How to override bootstrip.min.css in Joomla-Template CSS file for width 768-1140px

    how to set css property of one class from another class

    How to Make Text Hovering Area not a Full Line?

    How to make html table made by list responsive?

    How to create spaces between elements in HTML/CSS

    How to change border of div containing radio button when checked

    How can I do this: text inside rectangle using HTML/CSS?

    How do I center Glyphicons horizontally using Twitter Bootstrap

    How to accomplish this layout with CSS and HTML?

    How to change this table layout to a css layout?

    CSS hide/show effect works on Firefox but not on Chrome/Safari

    CSS: How to get browser scrollbar width? (for :hover {overflow: auto} nice margins)

    Showing/hiding elements inside a div block with HTML and CSS

    How to vertically align html radio buttons with CSS-only in this code?