CSS how do i center an UL inside a wrapper? - html

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>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav>
</nav>
</header>

Answer 1

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>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav>
</nav>
</header>