Ich habe versucht, col-centred class, margin: 0 auto, aber ich muss die Breite der enthaltenen div zu einer festgelegten Pixelbreite sehen ... Ich will das nicht .... muss auch reagieren .Was ist der beste Weg, Bootstrap div horizontal auszurichten?
Der Stift ist hier:
http://codepen.io/Satearn/pen/WpzJYy
.center-portfolio
{
margin:0 auto;
padding-left:20px;
width:800px;
}
In diesem Fall Sie text-align: center; zu .center-portfolio und .center-portfolio > p { display: inline-block;} hinzufügen hinzufügen könnte. Aber Sie müssten zusätzliche margin-top in den .center-portfolio
Sie https://css-tricks.com/centering-css-complete-guide/ für weitere Informationen überprüfen können die Dinge in CSS, sehr cool Artikel auf Zentrieren.
P.S. Sie könnten die width zu max-width
Nehmen, um die 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>Probieren Sie diese HTML5 Markup für Bootstrap basierte Codierung
.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>
Sie möchten es also ohne Angabe einer Breite zentrieren? Oder möchtest du nur den Inhalt innerhalb des divs zentrieren? –
Wenn Sie nur den Inhalt zentrieren wollen, würde ich es so machen. http://codepen.io/mcoker/pen/XMEYNm –
Wenn Sie das Eltern-div zentrieren möchten, ohne eine Breite anzugeben, würde ich es so machen http://codepen.io/mcoker/pen/JWLZEB oder vielleicht Sie ' Lust auf etwas anderes? –