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

Tags: html,css

Problem :

I have the following page 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:

    CSS Howto..

    How can I turn a background visibility on and off with jQuery?

    How to Convert SASS on the fly to CSS in Python?

    How to remove zoom effect of tile(metro ui css) using javascript

    Html and CSS for emails, how to, where to?

    How to Make Auto Size Horizontal Line DIV using css?

    How to set MenuItem to corrent width in

    How to keep CSS from render-blocking my website?

    CSS how to fix an element to scroll horizontally with the page but not vertically?

    How do I fix my css floats on IE 6 & 7? Or how can I lay this out better?

    How to measure the amount of time an animation took place using JavaScript

    How to pause or delay animation using JavaScript/jquery

    How to pass to next line that cutted elements in a list?

    How find all elements with a specific css property in a div and add a class to div

    How to make liquid layout in css using em?

    How to Create Responsive Web Page With Static Header?

    How to change and maintain multiple color themes at runtime with css?

    How to Add CSS Reference to .NET SyndicationFeed?

    How to style a 3rd-party iFrame [duplicate]

    How do you close the CSS preview view in Eclipse?

    How to make header/body/footer 'popup' div with variable height body?

    How to assign CSS background image properties mixing classes and ids

    How to avoid this hardcoded index.js when use webpack?

    GWT how to add css style on Image Resource

    How to remove a element after animation?

    How to completely fill screen with smaller elements?

    How to actually center (vertical and horizontal) text inside a nested div

    How to get the exact RGBa value set through CSS via Javascript?

    how to make a double hover effect with css

    How to include a css stylesheet in Orchard module?

    Hover over a pre - how to highlight a single line with plain CSS?