Question

我尝试了以col为中心的类，margin：0 auto，但我需要看到包含div的宽度到设定的像素宽度......我不想要那个....也必须做出回应。

笔在这里：

   .center-portfolio
 {
 margin:0 auto;
padding-left:20px;
  width:800px;
}

Answer 1

在这种情况下，您可以将text-align: center;添加到.center-portfolio并添加.center-portfolio > p { display: inline-block;}。但是你必须在.center-portfolio

添加额外的margin-top

View on Codepen

您可以查看https://css-tricks.com/centering-css-complete-guide/以获取有关CSS中心内容的更多信息，非常酷的文章。

P.S。您可能希望将width更改为max-width

Answer 2

申请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">&nbsp;</span>
</p>
<p><span class="glyphicon glyphicon-tag portfolio_categories">&nbsp;</span>
</p>
<p><span class="glyphicon glyphicon-plus-sign portfolio_categories">&nbsp;</span>
</p>
<p><span class="glyphicon glyphicon-globe portfolio_categories">&nbsp;</span>
</p>
<p><span class="glyphicon glyphicon-tint portfolio_categories">&nbsp;</span>
</p>

</div>

Answer 3

为基于 Bootstrap 的编码尝试此 HTML5 标记

.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">&nbsp;</span>
        </p>
        <p><span class="glyphicon glyphicon-tag portfolio_categories">&nbsp;</span>
        </p>
        <p><span class="glyphicon glyphicon-plus-sign portfolio_categories">&nbsp;</span>
        </p>
        <p><span class="glyphicon glyphicon-globe portfolio_categories">&nbsp;</span>
        </p>
        <p><span class="glyphicon glyphicon-tint portfolio_categories">&nbsp;</span>
        </p>
      </div>
    </div>
  </div>
</div>

水平对齐bootstrap div的最佳方法是什么？

3 个答案: