Bootstrap Footer: Trouble Centering The Social Media Icons - html

Question

I have been trying to center the Social media Icons for over an hour and I seem to go nowhere.
Below is the HTML code snippet.
<footer>
<div class="container">
<div class="row-footer">
<div class="row row-content">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
</div>
</div>
</footer>
And below is the CSS code snippet.
.row-footer {
background-color: #AfAfAf;
margin:200px auto;
padding: 20px 0px 20px 0px;
}
.navbar-nav {
display: inline-block;
text-align: center;
}
This is how its appearing on Google Chrome.

Answer 1

Because you're using the navbar-nav class you have to remove it's default float:left rule.
.navbar-nav {
padding: 40px 10px;
float: none;
text-align: center;
}
Working Example 1:
.row-footer {
background-color: #AfAfAf;
margin: 200px auto;
padding: 20px 0px 20px 0px;
}
div.navbar-nav {
padding: 40px 10px;
float: none;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>
<div class="container">
<div class="row-footer">
<div class="row">
<div class="nav navbar-nav">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
</div>
</div>
</footer>
Working Example 2:
.row-footer {
background-color: #AfAfAf;
margin: 200px 0;
}
.footer-nav {
text-align: center;
padding: 40px 0;
}
.footer-nav a {
display: inline-block;
padding: 0 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row-footer">
<div class="footer-nav">
<a class="btn btn-social-icon btn-google-plus" href="#">
<i class="fa fa-google-plus"></i>
</a>
<a class="btn btn-social-icon btn-facebook" href="#">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="#">
<i class="fa fa-linkedin"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="#">
<i class="fa fa-twitter"></i>
</a>
<a class="btn btn-social-icon btn-youtube" href="#">
<i class="fa fa-youtube"></i>
</a>
<a class="btn btn-social-icon" href="#">
<i class="fa fa-envelope-o"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</footer>

Answer 2

Try using display: inline-block; on the icon combined with text-align:center on icons container.
If there is going to be more children than just the icons, consider wrapping them into another <div>.
a {
display: inline-block;
}
.navbar-nav {
text-align: center;
}
Here is updated jsfiddle