Question

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

我甚至尝试过将div包装在文本元素中并将其与中心对齐的好老把戏，但这并不好。在我转到代码之前，这里有一些可视化问题的图片。以下是宽度＆lt; = 1920px时的样子（忽略页面底部的小对齐问题）

enter image description here

以下是我展开屏幕时会发生的事情。除了那行之外的所有东西都完美地对齐。

enter image description here

相关代码：

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，那么它将是靠近中心的一列。然而，这并不完美，不幸的是，你现在不能分成半列。

你最好的选择是让中间列8宽，并保持1列偏移（或等效地，使其10列宽并且没有偏移）。内部的每个div都是display: block，这意味着它占据了整个宽度。默认情况下，图片为display: inline，因此您可以强制它们到中心位置：

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

text-align适用于inline和inline-block 儿童，因此将其应用于图片的父级非常重要（并将图像保持为{ {1}}或inline）。

Answer 2

首先请注意，脚手架类（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。

在大屏幕上将行内容居中（＆gt; 1920px）

2 个答案: