在 div 中间对齐 <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 居中并添加一些左右 padding 到 lis.

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

<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 2

尝试text-align:centerhttp://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 horizontally center

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

<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>

在 div 中间对齐 <ul>

Align <ul> in a middle of div

html

css

alignment

html-lists

centering

水平

垂直

两者都