水平对齐引导 div 的最佳方法是什么？答案

【问题标题】：What is the best way to align bootstrap div horizontally?水平对齐引导 div 的最佳方法是什么？
【发布时间】：2017-03-22 04:29:51
【问题描述】：

我尝试过 col-centered 类，margin:0 auto，但我需要查看包含 div 的宽度到设置的像素宽度...我不希望这样....必须响应也。

笔在这里：

http://codepen.io/Satearn/pen/WpzJYy

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

【问题讨论】：

所以你想在不指定宽度的情况下将其居中？或者您只是想将 div 内的内容居中？
如果你只是想让内容居中，我会这样做。 codepen.io/mcoker/pen/XMEYNm
如果您想在不指定宽度的情况下将父 div 居中，我会这样做 codepen.io/mcoker/pen/JWLZEb 或者您可能会选择其他方式？

标签： css twitter-bootstrap

【解决方案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 中居中的信息，非常酷的文章。

附：您可能希望将 width 更改为 max-width

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：