What is the best way to align bootstrap div horizontally? - css

Question

I've tried col-centered class, margin:0 auto, but I need to see the width of the containing div to a set pixel width...I don't want that....has to be responsive also.
The pen is here:
http://codepen.io/Satearn/pen/WpzJYy
.center-portfolio
{
margin:0 auto;
padding-left:20px;
width:800px;
}

Answer 1

In this case you could add text-align: center; to .center-portfolio and add .center-portfolio > p { display: inline-block;}. But you would have to add additional margin-top to .center-portfolio
View on Codepen
You can check https://css-tricks.com/centering-css-complete-guide/ for more info on centering things in CSS, very cool article.
P.S. You might want to change the width to max-width

Answer 2

APPLY THE CSS
.glyphicon.glyphicon-print ,
.glyphicon.glyphicon-globe ,
.glyphicon.glyphicon-tag ,
.glyphicon.glyphicon-plus-sign ,
.glyphicon.glyphicon-tint
{
font-size: 5vw;
color:#88BA00;
}
.center-portfolio
{
margin:0 auto;
display:block;
padding-left:20px;
text-align:center;
}
p
{
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="center-portfolio">
<p><span class="glyphicon glyphicon-print portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tag portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-plus-sign portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-globe portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tint portfolio_categories"> </span>
</p>
</div>

Answer 3

Try This HTML5 markup for Bootstrap based coding
.glyphicon.glyphicon-print,
.glyphicon.glyphicon-globe,
.glyphicon.glyphicon-tag,
.glyphicon.glyphicon-plus-sign,
.glyphicon.glyphicon-tint {
font-size: 5vw;
float: left;
color: #88BA00;
}
.center-portfolio {
margin: 0 auto;
padding-left: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="center-portfolio">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p><span class="glyphicon glyphicon-print portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tag portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-plus-sign portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-globe portfolio_categories"> </span>
</p>
<p><span class="glyphicon glyphicon-tint portfolio_categories"> </span>
</p>
</div>
</div>
</div>
</div>