Question

我需要将div标签及其元素居中。我试过给出宽度和边距左：auto;和margin-top：auto;但它没有用！

我需要垂直居中。

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

目前处于以下状态：

现在有效，感谢hungerstar和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

使用css flexbox。将以下css添加到ul。

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

从float: left;移除.nav ul li a并将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中的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标签与它的元素对齐？

5 个答案: