【问题标题】: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>

      【讨论】:

        猜你喜欢
        • 2010-10-18
        • 2016-03-07
        • 2018-05-17
        • 1970-01-01
        • 2013-04-16
        • 2017-11-05
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多