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

Question

我尝试了许多在网上发布的解决方案，但当宽度大于 1920 像素时，似乎没有一个解决方案能解决我的问题。我尝试过的事情包括但不限于：

• 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 包装在文本元素中并将其对齐到中心的老技巧，但这并不好。在我继续编写代码之前，这里有一些图片来可视化问题。 这是宽度

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

相关代码：

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

首先注意脚手架类（col-md-* col-lg-*）的值的总和必须等于 12 Bootstrap 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。

Answer 2

目前，您的列不占用 Bootstrap 的全部 12 列宽度。每列都向左浮动，因此它们将向左对齐。您想向中间列添加偏移量以将其强制在中间。

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

最好的办法是将中间列设为 8 列宽，并保持 1 列偏移（或等效地设为 10 列宽且没有偏移）。里面的每个 div 都是display: block，这意味着它占据了整个宽度。图片默认是display: inline，所以可以强制居中：

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

text-align 适用于inline 和inline-block children，因此将其应用于图像的父级很重要（并将图像保持为inline 或inline-block )。