如何水平對齊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

你很接近。 只需從nav>ul刪除position: absolute ，並從nav>ul>li刪除float: left並將其替換為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;
}

在這種情況下使用具有變換屬性的位置。 而不是浮動：左； 使用 display:inline-block;

Answer 3

Flexbox 可能是一種方法。 這是一個快速的 JS Fiddle，向您展示如何實現您想要的： 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;
 }