Question

我试图将包含无序内联列表的div元素置于网页中心。我将包含div的边距设置为自动自动，正确地将div居中放在页面上，但是我无法找到一种方法来获取它包含的内联列表以在其中正确居中。内联列表在div内略微向左。我试着修理： padding：auto auto; 在包含div元素中，所以它包含的任何文本/列表都会居中，但这并没有任何影响......

我试过

CSS：

@font-face {
 font-family: 'Exo-Black';
 src: url('fonts/Exo-Black.otf');
}

@font-face {
    font-family: 'SourceSansPro-Bold';
    src: url('fonts/SourceSansPro-Bold.otf');
}

@font-face {
    font-family: 'SourceCodePro-Black';
    src: url('fonts/SourceCodePro-Black.otf');
}

@font-face {
    font-family: 'Exo-Bold';
    src: url('fonts/Exo-Bold.otf');
}

@font-face {
    font-family: 'Exo-Regular';
    src: url('fonts/Exo-regular.otf');
}

.icon {
    margin-top: 20px;
    margin-left: 20px;
    float: left;
}

.name {
    font-family: Exo-Black;
    font-size: 32px;
    color: firebrick;
    width: 60%;
    text-transform: uppercase;
    float: left;
    margin-left: 10px;
    text-transform: uppercase;
}

.phone {
    font-family: SourceSansPro-Bold;
    font-size: 24px;
    float: left;
}

.nav {
    clear: left;
    width: 50%;
    font-family: SourceCodePro-Black;
    font-size: 24px;
    border: 1px solid #000000;
    margin: auto auto;
    padding: auto auto;
}

li { display: inline; }

HTMLcode：

 <div id="page">
  <div class="icon"> 
    <img src="pics/icon2.jpg" alt="" width="125" height="104" /> 
   </div>
  <div class="name">
    <p>Mount Vernon PC</p>
  </div>
  <div class="phone">
    <p>Call or Text: (703) 485 - 5729</p>
  </div>
  <div class="nav">
    <ul id="navigation">
      <li>Home</li>
      <li>Infection</li>
      <li>Repair</li>
      <li>Upgrade</li>
      <li>Build</li>
    </ul>
  </div>
</div>

Answer 1

ul元素有一个默认的左缩进（padding-left），用于标记不会被推出列表：

ul#navigation { padding-left: 0; text-align:center; list-style-type:none; }

JSFiddle

Answer 2

这就是你想要的吗？ http://jsfiddle.net/L7yWJ/

ul {
    padding:0;
    width:100%;
    text-align:center;
}

li {
    margin:10px;
    background:rgba(0,0,255,0.5);
    list-style-type: none;
}

Answer 3

你必须在li中添加display：block，在li元素中添加text-align：center。此外，默认情况下ul从左侧获取填充，因此您必须将其设置为0。

@font-face {
 font-family: 'Exo-Black';
 src: url('fonts/Exo-Black.otf');
}

@font-face {
    font-family: 'SourceSansPro-Bold';
    src: url('fonts/SourceSansPro-Bold.otf');
}

@font-face {
    font-family: 'SourceCodePro-Black';
    src: url('fonts/SourceCodePro-Black.otf');
}

@font-face {
    font-family: 'Exo-Bold';
    src: url('fonts/Exo-Bold.otf');
}

@font-face {
    font-family: 'Exo-Regular';
    src: url('fonts/Exo-regular.otf');
}

.icon {
    margin-top: 20px;
    margin-left: 20px;
    float: left;
}

.name {
    font-family: Exo-Black;
    font-size: 32px;
    color: firebrick;
    width: 60%;
    text-transform: uppercase;
    float: left;
    margin-left: 10px;
    text-transform: uppercase;
}

.phone {
    font-family: SourceSansPro-Bold;
    font-size: 24px;
    float: left;
}

.nav {
    clear: left;
    width: 50%;
    font-family: SourceCodePro-Black;
    font-size: 24px;
    border: 1px solid #000000;
    margin: auto auto;
    padding: auto auto;
}

li { display: block; text-align:center;  }

ul { padding:0px; }

JSFIDDLE：http://jsfiddle.net/Husen/Y6vLT/3/

UL不以父div为中心

3 个答案:

JSFiddle