Question

我正在使用模板，我正试图将导航栏放在中心，因为我移动了徽标。这是CSS

/* Menu */
.menu{float:right; padding:14px 20px 0 0;}
.menu ul {list-style:none; margin:0; padding:0px;}
.menu ul * {margin:0; padding:0;}
.menu ul li {position:relative; float:left; padding:0 20px 0 20px; height:35px;}
.menu ul li a{font-family: 'Marmelad', sans-serif;color:#2b2b2b; font-size:16px;}
.menu ul li.selected a{color:#e93139;}
.menu ul li a:hover{color:#e93139;}

<div class="menu">
    <ul>
        <li class="selected"><a href="index.html">home</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="page.html">competition</a></li>
        <li><a href="page.html">workshops</a></li>

        <li><a href="blog.html">travel</a></li>
        <li><a href="portfolio.html">gallery</a></li>
        <li><a href="contact.html">contact</a></li> 
    </ul>
 </div>

如何将此菜单置于中心位置？

Answer 1

删除

.menu {
  float: right;
}

添加

.menu {
  text-align: center;
}

.menu ul {
  display: inline-block;
}

Demo

设置在text-align: center上的

.menu适用于此元素的文本内容，但也适用于所有内联或内联块子元素。这就是我们将display: inline-block提供给.menu ul。

的原因

Answer 2

编辑前两行css：

/* Menu */
.menu{padding:14px 20px 0 0; text-align:center}
.menu ul {list-style:none; margin:0; padding:0px; display:inline-block;}

Answer 3

在菜单类上使用以下css：

display: table;
position: relative;
margin-left: auto;
margin-right: auto;

即使没有指定宽度，也会将任何内容置于中心位置。

Answer 4

将您的CSS改为此

body{margin:0, padding:0;}
.menu{position:relative; left:15%; margin:auto;}
.menu ul {list-style:none; margin:0; padding:0px;}
.menu ul * {margin:0; padding:0;}
.menu ul li {display:inline; padding:0 20px 0 20px; height:35px;}
.menu ul li a{font-family: 'Marmelad', sans-serif;color:#2b2b2b; font-size:16px;}
.menu ul li.selected a{color:#e93139;}
.menu ul li a:hover{color:#e93139;}

Answer 5

将.menu类更改为：

.menu{ padding:14px 20px 0 0; margin:auto; width:50%;}

居中导航菜单

5 个答案: