在大屏幕（> 1920px）上居中一行的内容

Question

我尝试了网上发布的许多解决方案，当宽度大于 1920 像素时，none 似乎可以解决我的问题。我尝试过的包括但不限于：

http://www.w3.org/Style/Examples/007/center.en.html
How to center image in a div horizontally and vertically
How to make an image center (vertically & horizontally) inside a bigger div

我什至尝试了将 div 包裹在文本元素中并仅将其居中对齐的好老把戏，但效果不佳。在我继续编写代码之前，这里有一些图片可以形象地说明问题。这是 width <= 1920px 时的样子（忽略页面底部的小对齐问题）

下面是我展开屏幕时发生的情况。除了该行之外的所有内容都完美对齐。

相关代码：

HTML:

<div class="displaylayer">
    <div class="container">
        <div class="row">
            <div class="col-md-1 col-lg-1">
                <img src="images/button2.png" class="clickthisleft" />
            </div>
            <div class="col-md-5 col-lg-7"> 
                <div id="displayframe">
                    <div id="display">
                        <img id="mainimage" src="images/col1.jpg" height="420" width="960" />
                    </div>
                </div>
            </div>
            <div class="col-md-1 col-lg-1">
                <img src="images/button2.png" class="clickthisrigth"/>
            </div>
        </div>
    </div>
</div>

CSS:

 .container{
   width: 100%;
 }
 .row{
   width: 100%;
 }
 .displaylayer {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

 .displaylayer .row div{
    margin-left: 5%;
  }

  #display{
     width: 960px;
     height: 420px;
     overflow: hidden;
     margin-left: 0%;
     margin-right: auto;
     border-radius: 4px;
     background-color: white;
  }

 .displaylayer .container{
    width: 100%;
 }

 .displaylayer .row{
    width: 100%;
    margin-left: 200px; 
 }
 .clickthisleft, .clickthisrigth{
     margin-top: 130px;
     width: 70px;
     height: 200px;
  }

  .clickthisrigth{
     margin-left: 45%;
   }

 .clickthisleft{
    margin-left: 100%;
  }

如有任何建议，我们将不胜感激。即使需要达到一定的宽度，我可以手动安排其余部分。每个自动像素意味着更少的手动优化，这总是好的。

Answer 1

目前您的列没有占据 Bootstrap 的全部 12 列宽度。每列都向左浮动，因此它们将向左对齐。您想要向中间列添加一个偏移量以强制它位于中间。

例如，还剩 12 - 1 - 1 - 7 = 3 列。你想拆分它，所以如果你在 7 列的中间部分添加一个 col-lg-offset-1，那么它将是离中心更近的一列。然而，这并不完美，不幸的是，您目前不能 divide 半列。

你最好的选择是使中间列 8 wide，并保持 1 列偏移（或者等价地，使它成为 10 列 wide 并且没有偏移).每个 div inside 将是 display: block，这意味着它占据了整个宽度。图片默认是display: inline，所以你可以强制它们居中：

#display {
    #mainimage: {
        text-align: center;
    }
}

text-align 适用于 inline 和 inline-block children，因此将其应用于图像的父级（以及将图像保留为 inline 或 inline-block).

Answer 2

首先注意脚手架类(col-md-* col-lg-*)的值之和必须等于12Bootstrap grid example所以尝试把HTML改成这样:

<div class="displaylayer">
<div class="container">
    <div class="row">
        <div class="col-md-1 col-lg-1">
            <img src="images/button2.png" class="clickthisleft" />
        </div>
        <div class="col-md-10 col-lg-10"> 
            <div id="displayframe">
                <div id="display">
                    <img id="mainimage" src="images/col1.jpg" height="420" width="960" />
                </div>
            </div>
        </div>
        <div class="col-md-1 col-lg-1">
            <img src="images/button2.png" class="clickthisrigth"/>
        </div>
    </div>
</div>

或尝试使用不同的值，但总和必须为 12。

在大屏幕（> 1920px）上居中一行的内容

Centering the content of a row on large screens (> 1920px)

html

css

twitter-bootstrap-3