发表新帖
发表新帖

How I can center a menu bar with ul

后端 未结
关注
3 1318
孤街浪徒
孤街浪徒 2020-12-12 04:20

I have a simple menu bar inside a div and I can center the div but I want to center the menu bar inside the div.

This is the code:

CSS:

相关标签:
3条回答
  • 轮回少年
    2020-12-12 04:44

    Could very well be that the width you're trying to set is too big? http://jsfiddle.net/As98Q/

    width: 550px;
    0 讨论(0)
  • 野趣味
    2020-12-12 04:45

    First off all, make sure the div is wider that the menu bar. You can try 

    display:inline

    or if not

    text-align:center;

    for the div

    0 讨论(0)
  • 野趣味
    2020-12-12 05:01

    First of all, please note that you should put the elements inside the <body> tag.

    Actually, The ul element is aligned at the center (See demo here). But the point is that the list items are floated to the left.

    There are tow options:

    1. Using a proper fixed width (or max-width as you did) for the <ul> element. Working Demo

    2. Or use display: inline-block instead of float: left for the list items, and use text-align: center for the ul to align the inline elements horizontally. Working Demo.

    But note that there is a white space between inline(-block) elements, which absolutely the normal behavior of inline elements in inline flow. You can refer my answer here to fix that.

    0 讨论(0)
 看不清?
提交回复
热议问题