CSS如何将UL置于包装器中心？

Question

我无法集中我的ul，其中包含facebook，twitter和linkedin的图标。在我的页面中，图标更向右，而不是居中。任何帮助将不胜感激。

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