100％宽度div内的CSS中心ul列表 [英] CSS center ul list inside a 100% width div

问题描述

我感觉好像我已经尝试过从text-align center到margin:0 auto的所有事情，相对位置和宽度为100％，但是它们没有用，我试图将UL居中于div内...

I feel as if I have tried everything from text-align center to margin:0 auto with a position relative and width of 100%, but they didn't work, I am trying to center my UL inside the div...

这是我的代码

<style type="text/css">

.header {
  height: 40px;
  background: #000;
  width: 100%;
}

.header ul {
  list-style-type: none;
}

.header li {
  float: left;
  line-height: 40px;
}

.header li a {
  color: #FFF;
  padding: 0 18px;
  height: 40px;
}

</style>

<div class="header">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Rates</a></li>
    <li><a href="#">Reviews</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

推荐答案

此方法无需定义设置宽度即可.

This works without having to define a set width.

ul {
    display: table;
    margin: 0 auto;
}

如果要摆脱左侧填充，从而使列表真正居中，请添加:

If you want to get rid of the left-side padding, thus genuinely centering the list, add:

padding-left: 0;

这篇关于100％宽度div内的CSS中心ul列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！