Clever Geek Handbook

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

I have the following page http://jsfiddle.net/Leytgm3L/18/ and as you can see there are 6 links to different cities. I put in the 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 is not inside the main div ... How can I do this?

+3


source to share


3 answers


Try adding these rules:

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


This way the last link will not enter a new line because of it margin-right

. Also, the first link will be on the left border of its parent. And in general they are concentrated.

There is a script here: http://jsfiddle.net/04z3L5gs/

+2


source


To center your list of cities, just apply the following to your ul:



ul {
  text-align: center;
}
+6


source


Well, usually the centering elements depend on the size of the element.

Try to gradually change the left and right margins so that it is where you want it. This is for the code you have right now.

But I recommend that you use:

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

Changes the size of the "left: 50px" element until you are satisfied.

Also consider whether to use "margin-right: 10%"

0


source






More articles:


All Articles