如何将所有导航按钮置于中心位置？

时间：2018-02-12 11:26:57

标签： html css

我尝试了很多方法来集中所有导航按钮，我正在使用text-align: center，但它没有帮助，因为我的一个按钮是一个图像，并且具有更大的高度和宽度。我还必须调整图像大小，因为它太大了。

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  background-color: white;
  height: auto;
  width: inherit;
  margin-bottom: 0.5em;
  border-top: 0px;
  border-bottom: 2px;
  border-left: 0px;
  border-right: 0px;
  border-style: inset;
  border-width: auto;
  border-color: red;
}

nav ul {
  list-style-type: none;
  overflow: auto;
}

nav ul li {
  float: left;
  margin-right: 20px;
  height: auto;
  width: auto;
  margin: 10px;
  text-align: center;
}

nav ul li a {
  text-decoration: none;
  display: table;
  width: 100%;
  height: 100%;
}
<header>
  <nav>
    <ul>
      <li>
        <a href="index.html"><img src="http://via.placeholder.com/100x100" alt="mylogo" style="width: 100px;height: 100px"></a>
      </li>
      <li><a href="apps.html"><span>APPS</span></a></li>
      <li><a href="contact.html"><span>CONTACT</span></a></li>
    </ul>
  </nav>
</header>

That's how it looks right now That's what I want to create

5 个答案:

答案 0 :(得分：2)

您可以将display: inline-block;元素应用于li个元素（删除所有float: left），将text-align: center应用于以ul为中心的li在ul：

中

如果您希望两个文字li垂直居中于图片li，请将vertical-align:middle;添加到li 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  background-color: white;
  height: auto;
  width: inherit;
  margin-bottom: 0.5em;
  border-top: 0px;
  border-bottom: 2px;
  border-left: 0px;
  border-right: 0px;
  border-style: inset;
  border-width: auto;
  border-color: red;
}

nav ul {
  list-style-type: none;
  text-align:center;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
  margin: 10px;
  text-align: center;
  vertical-align:middle;
}

nav ul li a {
  text-decoration: none;
}
<header>
  <nav>
    <ul>
      <li>
        <a href="index.html"><img src="http://placehold.it/80x80/fda" alt="mylogo" style="width: 100px;height: 100px"></a>
      </li>
      <li><a href="apps.html"><span>APPS</span></a></li>
      <li><a href="contact.html"><span>CONTACT</span></a></li>
    </ul>
  </nav>
</header>

答案 1 :(得分：1)

水平对齐中心使用text-align: center;要垂直对齐，您可以使用display: table-cell和vertically-align: middle;

＆＃13;
＆＃13; 
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
    background-color: white;
    height: auto;
    width: inherit;
    margin-bottom: 0.5em;
    border-top: 0px;
    border-bottom: 2px;
    border-left: 0px;
    border-right: 0px;
    border-style: inset;
    border-width: auto;
    border-color: red;
}
nav ul{
    list-style-type: none;
    overflow: auto;
    text-align: center;
}
nav ul li{
    display: inline-block;
    margin-right: 20px;
    height: 50px;
    width: 100px;
    margin: 10px;
    text-align: center;
}
nav ul li a {
    text-decoration: none;
    display: table;
    width: 100%;
    height: 100%;
}
nav ul li a span{
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
＆＃13; 
<header>
            <nav>
                <ul>
                    <li><a href="index.html"><span><img src="https://www.seoclerk.com/pics/551103-1TOqFD1502285018.jpg" alt="mylogo" style="width: 40px;height: 40px"></span></a></li>
                    <li><a href="apps.html"><span>APPS</span></a></li>
                    <li><a href="contact.html"><span>CONTACT</span></a></li>
                </ul>
            </nav>
        </header>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

我认为这是使用简单flex的一个很好的例子。将容器（nav ul）设置为display: flex，并指定其项目必须居中对齐。最后，您还可以指出如何在可用空间中划分这些列表项。在下面的示例中，我使用了justify-content: space-around。

＆＃13;
＆＃13; 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

nav {
  background-color: white;
  height: auto;
  width: inherit;
  margin-bottom: 0.5em;
  border-bottom: 2px inset red;
}

nav ul {
  list-style-type: none;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

nav ul li {
  margin: 10px 20px 10px 10px;
  text-align: center;
}

nav ul li:last-child {
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  display: block;
  height: 100%;
}
＆＃13; 
<header>
  <nav>
    <ul>
      <li>
        <a href="index.html"><img src="http://via.placeholder.com/100x100" alt="mylogo" style="width: 100px;height: 100px"></a>
      </li>
      <li><a href="apps.html"><span>APPS</span></a></li>
      <li><a href="contact.html"><span>CONTACT</span></a></li>
    </ul>
  </nav>
</header>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以在列表项上使用display:inline并删除当前样式为a标记，因为这会强制所有项目都是屏幕宽度的100％。另外，将text-align:center添加到ul，这应该是您的列表的中心：

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
    background-color: white;
    height: auto;
    width: inherit;
    margin-bottom: 0.5em;
    border-top: 0px;
    border-bottom: 2px;
    border-left: 0px;
    border-right: 0px;
    border-style: inset;
    border-width: auto;
    border-color: red;
}
nav ul{
    list-style-type: none;
    overflow: auto;
    text-align:center;
}
nav ul li{
    display:inline;
    margin-right: 20px;
    height: auto;
    width: auto;
    margin: 10px;
    text-align: center;
}
nav ul li a{
    text-decoration: none;
}
<header>
            <nav>
                <ul>
                    <li><a href="index.html"><img src="logo.png" alt="mylogo" style="width: 100px;height: 100px"></a></li>
                    <li><a href="apps.html"><span>APPS</span></a></li>
                    <li><a href="contact.html"><span>CONTACT</span></a></li>
                </ul>
            </nav>
        </header>

希望这有帮助。

答案 4 :(得分：0)

使用Flexbox。它比任何东西都容易，它可以同时垂直和水平居中导航元素。

＆＃13;
＆＃13; 
nav {
  background:#eee;
  width:500px;
  padding:10px;
  box-sizing:border-box;
}
nav ul { /* this is the magical part */
  display:flex;
  justify-content:space-evenly;
  align-content:center;
  flex-flow:row wrap;
  margin:0;
  padding:0;
}
nav li {
  list-style:none;
}
nav a {
  display:block;
  text-decoration:none;
  background-color:#ccc;
  padding:5px 20px;
}
a.logo {
  display:block;
  height:30px;
  width:25px;
  padding:0;
  background:url("https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be") 0 -500px #ccc;
}
＆＃13; 
<nav>
  <ul>
    <li><a href="#" class="logo"></a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题