如何水平对齐div

Question

我在对齐页面中间的div时遇到困难。因此，我使用绝对定位将它们放置在中间位置，但是当我尝试进行媒体查询时，很难将它们放置在中间位置。请提供任何帮助。

nav>ul {
  position: absolute;
  top: 114px;
  text-align: center;
  ;
}

nav>ul>li {
  list-style: none;
  float: left;
}

nav>ul>li>a {
  text-decoration: none;
  font-family: 'Abel', sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 45px 10px 45px;
  background: #20639B;
  border-left: 3px solid #34F532;
}

.color2 {
  height: 0px;
  border-bottom: 45px solid #20639B;
}

<div class="color2">
  <div class="header">
    <nav>
      <ul>
        <li><a href="{% url 'privacy_policy' %}" target="ifr2"> Privacy</a></li>
        <li><a href="{% url 'terms_of_use' %}" target="ifr2"> Terms of Use</a></li>
        <li><a href="{% url 'copyright' %}" target="ifr2">Copyright</a></li>
        <li><a href="{% url 'trademark' %}" target="ifr2">Trademark</a></li>
        <li><a href="{% url 'logos' %}" target="ifr2">Logos</a></li>
        <li><a href="{% url 'pay_transparency' %}" target="ifr2" style="border-right: 3px solid #34F532;">Pay Transparency</a></li>
      </ul>
    </nav>

  </div>
</div>

Answer 1

你很近。只需从position: absolute中删除nav>ul，然后从float: left中删除nav>ul>li，然后将其替换为display: inline-block。

nav>ul {
  padding-top: 10px;
  text-align: center;
}

nav>ul>li {
  list-style: none;
  display: inline-block;
}

nav>ul>li>a {
  text-decoration: none;
  font-family: 'Abel', sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 45px 10px 45px;
  background: #20639B;
  border-left: 3px solid #34F532;
}

.color2 {
  height: 0px;
  border-bottom: 40px solid #20639B;
}

<div class="color2">
  <div class="header">
    <nav>
      <ul>
        <li><a href="{% url 'privacy_policy' %}" target="ifr2"> Privacy</a></li>
        <li><a href="{% url 'terms_of_use' %}" target="ifr2"> Terms of Use</a></li>
        <li><a href="{% url 'copyright' %}" target="ifr2">Copyright</a></li>
        <li><a href="{% url 'trademark' %}" target="ifr2">Trademark</a></li>
        <li><a href="{% url 'logos' %}" target="ifr2">Logos</a></li>
        <li><a href="{% url 'pay_transparency' %}" target="ifr2" style="border-right: 3px solid #34F532;">Pay Transparency</a></li>
      </ul>
    </nav>
  </div>
</div>

Answer 2

检查此js小提琴

https://jsbin.com/geqovukozo/edit?css,output

nav{
  position:absolute;
  top:50%;
  width:100%;
  transform:translateY(-50%);
}
nav>ul {
  text-align: center;
  font-size:0;
}

nav>ul>li {
  list-style: none;
  display:inline-block;
}

nav>ul>li>a {
  display:block;
  text-decoration: none;
  font-family: 'Abel', sans-serif;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 10px 45px 10px 45px;
  background: #20639B;
  border-left: 3px solid #34F532;
}

.color2 {
  border-bottom: 45px solid #20639B;
}

在这种情况下，请使用具有transform属性的位置。而不是float：left;使用display：inline-block;

Answer 3

Flexbox可以成为一种方法。这里有一个快速的JS小提琴，向您展示如何实现所需的目标：https://jsfiddle.net/58u76mrn/13/

 nav {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
    width: 100vw;
 }

 nav a {
   text-decoration: none;
   font-family: 'Abel',sans-serif;
   color: #fff;
   font-size: 18px;
   font-weight: bold;
   padding: 10px 45px 10px 45px;
   background: #20639B;
   border-left: 3px solid #34F532;
 }

 .color2 {
   height: 0px;
 }