centering block of images on all screen sizes bootstrap - html

Question

I am using bootstrap to center a block of social icons underneath h1 text on all screen sizes. I almost got it, there are just 2 sizes where it keeps shifting.
Here is how it looks where it is shifted to the left slightly
here it's shifted to the right slightly
Here is my code:
<div id="container">
<div class="social-and-coming">
<div class="coming-soon text-center ">
<h1 class="coming ">Coming Soon</h1>
</div>
<div class="row">
<ul class="col-md-offset-3 col-md-11 col-sm-offset-3 col-sm-11 col-xs-offset-1 col-xs-11">
<li class="col-xs-1 col-sm-1 col-md-1"><img src="/wp-content/themes/avaziomedia/Facebook.png" alt=""></li>
<li class="col-xs-1 col-sm-1 col-md-1"><img src="/wp-content/themes/avaziomedia/Twitter.png" alt=""></li>
<li class="col-xs-1 col-sm-1 col-md-1"><img src="/wp-content/themes/avaziomedia/Instagram.png" alt=""></li>
<li class="col-xs-1 col-sm-1 col-md-1"><img src="/wp-content/themes/avaziomedia/Youtube.png" alt=""></li>
<li class="col-xs-1 col-sm-1 col-md-1"><img src="/wp-content/themes/avaziomedia/pinterest.png" alt=""></li>
</ul>
</div>
</div>
</div>
and here is my css:
#container{
// min-height:100%;
position:relative;
}
.site-title a{
font-family: Heiti TC;
color: #E8970C;
}
.text-center{
color: #E8970C;
}
.coming-soon h1{
font-family: Heiti TC;
font-size: 75px;
}
.row{
// width:700px;
margin: 0px auto;
}
.col-xs-1{
margin-left: 15px;
}
li{
margin-right: 20px;
margin-top: 20px;
}
img{
width:40px;
}
any help would be greatly appreciated!

Answer 1

Just remove the list and use text-center like you did for the title, it should work:
<div id="container">
<div class="social-and-coming">
<div class="coming-soon text-center">
<h1 class="coming">Coming Soon</h1>
</div>
<div class="text-center">
<img src="/wp-content/themes/avaziomedia/Facebook.png" alt="">
<img src="/wp-content/themes/avaziomedia/Twitter.png" alt="">
<img src="/wp-content/themes/avaziomedia/Instagram.png" alt="">
<img src="/wp-content/themes/avaziomedia/Youtube.png" alt="">
<img src="/wp-content/themes/avaziomedia/pinterest.png" alt="">
</div>
</div>
</div>

Answer 2

You are using some bootstrap offsets and so it will never be in the middle. I would suggest simplifying this and getting rid of the UL classes and add an id to it which applies the following CSS:
#socialLinks {
list-style:none;
text-align: center;
}
#socialLinks li {
margin: 0;
display: inline-block;
float: none;
}
jsFiddle demo
#container {
// min-height:100%;
position: relative;
}
.site-title a {
font-family: Heiti TC;
color: #E8970C;
}
.text-center {
color: #E8970C;
}
.coming-soon h1 {
font-family: Heiti TC;
font-size: 75px;
}
.row {
// width:700px;
margin: 0px auto;
}
.col-xs-1 {
margin-left: 15px;
}
li {
margin-right: 20px;
margin-top: 20px;
}
img {
width: 40px;
}
#socialLinks {
list-style:none;
text-align: center;
}
#socialLinks li {
margin: 0;
display: inline-block;
float: none;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
<div class="social-and-coming">
<div class="coming-soon text-center ">
<h1 class="coming ">Coming Soon</h1>
</div>
<div class="row">
<ul id="socialLinks">
<li class="col-xs-1 col-sm-1 col-md-1">
<img src="https://placehold.it/100x100" alt="">
</li>
<li class="col-xs-1 col-sm-1 col-md-1">
<img src="https://placehold.it/100x100" alt="">
</li>
<li class="col-xs-1 col-sm-1 col-md-1">
<img src="https://placehold.it/100x100" alt="">
</li>
<li class="col-xs-1 col-sm-1 col-md-1">
<img src="https://placehold.it/100x100" alt="">
</li>
<li class="col-xs-1 col-sm-1 col-md-1">
<img src="https://placehold.it/100x100" alt="">
</li>
</ul>
</div>
</div>
</div>

Answer 3

It's quite easy:
.yourclass {
width: SPECIFY_WIDTH;
margin: 0 auto;
}
It will always center irresepctive of any screen size. If you want spacing around on small devices then add padding to class.

Answer 4

Can you not use Bootstraps Div class helpers?
class: Text-center (text)
Class: center-block (images)
They seem to work for me, i dont do offsets much so not 100% how effective they will be.