CSS how do i center an UL inside a wrapper?

Question

I am having trouble centering my ul that contains icons of facebook, twitter, and linkedin. in my page the icons are more towards the right and are not centering. Any help would be greatly appreciated.

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>

I added your code here: https://jsfiddle.net/pw5fx7ym/ it seems the list is centered. — Dan Dinu, Oct 20 '16 at 22:07
Possible duplicate of [Center

into div](http://stackoverflow.com/questions/1708054/center-ul-li-into-div) — Rob, Oct 20 '16 at 22:22

score 0 · Accepted Answer · edited May 23 '17 at 11:48

Your centering is working. Just use padding: 0; on the ul to remove the left 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 how do i center an UL inside a wrapper?

1 Answers1