在<div>的中间对齐<ul> </ul>

Question

我希望<li>的文字位于#nav_bar的中间。我试图通过margin和padding执行此操作，但我没有成功，有人知道如何做到这一点吗？

#nav_bar {
  border: 2px solid black;
  background-color: gray;
  height: 40px;
}
li {
  display: inline-block;
  margin: 40px;
}

<div id="header">
  <div id="nav_bar">
    <ul>
      <li>home</li>
      <li>home 2</li>
      <li>home 3</li>
      <li>home 4</li>
      <li>home 5</li>
    </ul>
  </div>
</div>

Answer 1

重置ul的默认padding，将text-align: center添加到ul以使li居中并添加一些左右{{} 1}}到padding s。

＆＃13;

＆＃13;

li

＆＃13;

#nav_bar {
  border: 2px solid black;
  background-color: gray;
  height: 40px;
}
ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
  padding: 0 10px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试text-align:center http://jsfiddle.net/oktsheaw/

#nav_bar {
text-align:center;
border: 2px solid black;
background-color: gray;
height: 40px;
}

Answer 3

试试这个：

#nav_bar {
    border: 2px solid black;
    background-color: gray;
    height: 40px;
}
ul {
    margin: 0;
    padding: 0;
}
li {
    display: inline;
    margin; 0;
    list-style: none;
    line-height: 40px;
    padding: 0 15px;
}

Answer 4

你的意思是：http://codepen.io/anon/pen/KwaNwZ

CSS：

#nav_bar {
  border: 2px solid black;
  background-color: gray;
  text-align:center;
}

li {
  display: inline-block;
  margin-left: 40px;
}

Answer 5

水平

您可以使用text-align:center水平对齐。

#nav_bar {
  border: 2px solid black;
  background-color: gray;
  height: 40px;
  text-align:center;
}

ul {
  padding: 0;
}
li {
  display: inline-block;
}

<div id="header">
  <div id="nav_bar">
    <ul>
      <li>home</li>
      <li>home 2</li>
      <li>home 3</li>
      <li>home 4</li>
      <li>home 5</li>
    </ul>
  </div>
</div>

垂直

您可以使用定位垂直对齐。

#nav_bar {
  border: 2px solid black;
  background-color: gray;
  height: 40px;
  width:100%;
  position:relative;

}
ul {
  padding: 0;
  margin:0;
  position: absolute;
  top: 25%;
}
li {
  display:inline-block;

  }

<div id="header">
  <div id="nav_bar">
    <ul>
      <li>home</li>
      <li>home 2</li>
      <li>home 3</li>
      <li>home 4</li>
      <li>home 5</li>
    </ul>
  </div>
</div>

两个

我使用过定位，虽然其他形式同样有效。

#nav_bar {
  border: 2px solid black;
  background-color: gray;
  height: 40px;
  width:100%;
  position:relative;
  
}
ul {
  padding: 0;
  margin:0;
  position: absolute;
  top: 25%;
  left:25%;
}
li {
  display:inline-block;

  }

<div id="header">
  <div id="nav_bar">
    <ul>
      <li>home</li>
      <li>home 2</li>
      <li>home 3</li>
      <li>home 4</li>
      <li>home 5</li>
    </ul>
  </div>
</div>

Answer 6

由于元素在外面流动的高度移除了#nav_bar的高度，它将垂直居中并添加text-align：center horizo​​ntal center

＆＃13;

＆＃13;

#nav_bar {
  border: 2px solid black;
  background-color: gray;
  text-align: center;
}
li {
  display: inline-block;
  margin: 5px;
}

＆＃13;

<div id="header">
  <div id="nav_bar">
    <ul>
      <li>home</li>
      <li>home 2</li>
      <li>home 3</li>
      <li>home 4</li>
      <li>home 5</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;