CODEWITHSUNDEEP
htmlcsshtml-lists
G43beli
G43beli

Reputation: 3972

Horizontally align li in ul on multiple rows

I have a menu with multiple listitems in it: JS Fiddle

My goal is to align the listitems dinamically, also when it breaks on two or more lines.

So something like the center button in word. When i do text-aling on the <li> elements it just aligns it in the <li> itself. when I do margin: 0 auto on the <li> it breaks on like 8 rows.

It should somethink like:

enter image description here

Is there any way to achieve that?

Upvotes: 1

Views: 3518

Answers (3)

Purushothaman
Purushothaman

Reputation: 358

As others have mentioned, you can set the li to display:inline;, or float the li left or right. Additionally, you can also use display:flex; on the ul. In the snippet below I also added justify-content:space-around to give it more spacing.

For more information on flexbox, checkout this complete guide.

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}
<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Upvotes: 0

Mr.Pandya
Mr.Pandya

Reputation: 2038

Use Parent Styles as

{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

Upvotes: 5

Stuart
Stuart

Reputation: 6780

Here;s an updated fiddle. https://jsfiddle.net/bw5jw92L/1/

You need to add text-align:center to the containing UL, and also remove the float from the LI's and add a display:inline-block.

Here are the changes:

.TopMenuBlock .topCMSListMenuUL {
  font-size: 18px;
  margin: 0;
  font-weight: 600px;
  padding: 0;
  list-style: none;
  padding-top: 115px;
  margin: 0 auto;
  width: 68%;
  text-align:center;
}

.topCMSListMenuLI, .topCMSListMenuHighlightedLI, .topCMSListMenuLILast, .topCMSListMenuHighlightedLILast {
  position: relative;
  display:inline-block;
}

Upvotes: 1

Related Questions