如何将整个 div 标签及其元素居中？

Question

我需要将 div 标签及其元素居中。我试过给 width 和 margin-left: auto;和边距顶部：自动；但它不起作用！

我需要将 div 垂直居中。

HTML:

 <div class="nav">
  <ul>
    <li><a href="http://twitter.com/login"><img src="images/twitter.png" /></a></li>
    <li><a href="http://quora.com"><img src="images/quora.png" /></a></li>
    <li><a href="http://youtube.com"><img src="images/youtube.png" /></a></li>
    <li><a href="http://web.whatsapp.com"><img src="images/whatsapp.png" /></a></li>
    <li><a href="http://shreydan.tumblr.com"><img src="images/tumblr.png" /></a></li>
  </ul>
</div>

CSS:

.nav {
  height: 70px;
  width: 100%;
  background-color: #aed003;
}

.nav ul {
  margin-top: 0px;
  padding: 10px 0px;
}

.nav ul li {
  margin: 0px;
  list-style: none;
}

.nav ul li a {
  float: left;
  display: inline-block;
  margin: 0px 10px;
}

.nav ul li a img {
  height: 50px;
  max-height: 50px;
  width: 50px;
  max-width: 50px;
}

当前状态：

现在可以使用了，感谢 hungstar 和 Nick R 的回答，也感谢其他人。 @hungerstar：垂直对齐 div：https://jsfiddle.net/e6aq6f1w/3/ @nick-r：水平对齐 div 的元素：https://jsfiddle.net/f4fjxxj8/

Answer 1

删除 float:left 并将其替换为 display:inline-block;，然后在父级 ul 上添加 text-align:center - https://jsfiddle.net/f4fjxxj8/

Answer 2

使用cssflexbox。添加以下 css 到 ul.

.nav ul {
    justify-content: center;
    display: flex;
}

.nav {
  height: 70px;
  width: 100%;
  background-color: #aed003;
}

.nav ul {
  margin-top: 0;
  padding: 10px 0;
  justify-content: center;
  display: flex;
}

.nav ul li {
  border: 1px solid #000;
  margin: 0;
  list-style: none;
}

.nav ul li a {
  display: inline-block;
  margin: 0 10px;
}

.nav ul li a img {
  height: 50px;
  max-height: 50px;
  width: 50px;
  max-width: 50px;
}

<div class="nav">
  <ul>
    <li><a href="http://twitter.com/login"><img src="images/twitter.png" /></a></li>
    <li><a href="http://quora.com"><img src="images/quora.png" /></a></li>
    <li><a href="http://youtube.com"><img src="images/youtube.png" /></a></li>
    <li><a href="http://web.whatsapp.com"><img src="images/whatsapp.png" /></a></li>
    <li><a href="http://shreydan.tumblr.com"><img src="images/tumblr.png" /></a></li>
  </ul>
</div>

Answer 3

从 .nav ul li a 中删除 float: left; 并将 display: inline-block 放入 .nav ul li

Answer 4

这是垂直和水平居中和元素位于页面中间的一种解决方案。您将需要使用固定定位和翻译。

.nav {
  /* centering start */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* centering end */
  display: inline;
  background-color: #aed003;
}
.nav ul,
.nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav ul {
  padding: 0 5px
}
.nav li {
  float: left;
  padding: 10px 5px;
}
.nav ul li a img {
  display: block;
  max-height: 50px;
  max-width: 50px;
}

<div class="nav">
  <ul>
    <li>
      <a href="http://twitter.com/login">
        <img src="http://placehold.it/75x75?text=one">
      </a>
    </li>
    <li>
      <a href="http://quora.com">
        <img src="http://placehold.it/75x75?text=two">
      </a>
    </li>
    <li>
      <a href="http://youtube.com">
        <img src="http://placehold.it/75x75?text=three">
      </a>
    </li>
    <li>
      <a href="http://web.whatsapp.com">
        <img src="http://placehold.it/75x75?text=four">
      </a>
    </li>
    <li>
      <a href="http://shreydan.tumblr.com">
        <img src="http://placehold.it/75x75?text=five">
      </a>
    </li>
  </ul>
</div>

Answer 5

好吧，由于这个问题的答案是不同的人回答的，所以这是最终的解决方案：

nick-r : 用于水平居中对齐 div 的元素：

.nav ul {
  margin-top: 0px;
  padding: 10px 0px;
  text-align:center;
}

.nav ul li {
  margin: 0px;
  list-style: none;
  display:inline-block;
}

.nav ul li a {
  margin: 0px 10px;
}

hungerstar ：为了使 div 标签垂直居中：

.nav {
  height: 70px;
  width: 100%;
    position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #aed003;
}

如何将整个 div 标签及其元素居中？

How to center the entire div tag along with it's elements?

html

css

tags

margin

padding