CSS 如何将 UL 居中放置在包装器中？

Question

我无法将包含 facebook、twitter 和 linkedin 图标的 ul 居中。在我的页面中，图标更靠右并且没有居中。任何帮助将不胜感激。

body {
  margin: 0;
  font-family: sans-serif;
}
header {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
}
.header-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(macbook2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.header-dark {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.wrapper {
  width: 250px;
  height: auto;
  margin-top: -250px;
}
.selfie {
  width: 175px;
  height: 175px;
  border-radius: 50%;
  /*background-image: url(selfie.jpg);*/
  background-position: center center;
  background-size: cover;
  border: 2px solid #6f6f70;
  margin: 0 auto;
}
h2 {
  color: white;
  text-align: center;
}
ul {
  list-style-type: none;
  text-align: center;
}
ul li {
  display: inline-block;
}
.ion-social-facebook {
  color: white;
  font-size: 32px;
}
.ion-social-twitter {
  color: white;
  font-size: 32px;
}
.ion-social-linkedin {
  color: white;
  font-size: 32px;
}

<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<header>
  <div class="header-bg"></div>
  <div class="header-dark">
    <div class="wrapper">
      <div class="selfie"></div>
      <h2>Name</h2>
      <ul>
        <!--this is what i am trying to center-->
        <li>
          <a href="#" class="ion-social-facebook"></a>
        </li>
        <li>
          <a href="#" class="ion-social-twitter"></a>
        </li>
        <li>
          <a href="#" class="ion-social-linkedin"></a>
        </li>
      </ul>
    </div>
  </div>
  <nav>
  </nav>
</header>

Answer 1

您的居中设置正常。只需在 ul 上使用 padding: 0; 即可删除左侧的 standard padding of unordered lists.

body {
  margin: 0;
  font-family: sans-serif;
}
header {
  position: relative;
  display: block;
  width: 100%;
  height: 100vh;
}
.header-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(macbook2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.header-dark {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}
.wrapper {
  width: 250px;
  height: auto;
  margin-top: -250px;
}
.selfie {
  width: 175px;
  height: 175px;
  border-radius: 50%;
  /*background-image: url(selfie.jpg);*/
  background-position: center center;
  background-size: cover;
  border: 2px solid #6f6f70;
  margin: 0 auto;
}
h2 {
  color: white;
  text-align: center;
}
ul {
  list-style-type: none;
  text-align: center;
  padding: 0;
}
ul li {
  display: inline-block;
}
.ion-social-facebook {
  color: white;
  font-size: 32px;
}
.ion-social-twitter {
  color: white;
  font-size: 32px;
}
.ion-social-linkedin {
  color: white;
  font-size: 32px;
}

<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<header>
  <div class="header-bg"></div>
  <div class="header-dark">
    <div class="wrapper">
      <div class="selfie"></div>
      <h2>Name</h2>
      <ul>
        <!--this is what i am trying to center-->
        <li>
          <a href="#" class="ion-social-facebook"></a>
        </li>
        <li>
          <a href="#" class="ion-social-twitter"></a>
        </li>
        <li>
          <a href="#" class="ion-social-linkedin"></a>
        </li>
      </ul>
    </div>
  </div>
  <nav>
  </nav>
</header>

CSS 如何将 UL 居中放置在包装器中？

CSS how do i center an UL inside a wrapper?

html

css

centering