html - Bootstrap 3 中的水平对齐中心与偏移量

Question

我有一个基于 bootstrap 3 的布局，有两列，如何确保第二列中的文本与页面的中心(水平)对齐？

HTML:

<div class="row spaced">
    <div class="col-sm-2 text-center">
      <img src="Images/picture.png" alt="Image" height="100%" width="100%">
    </div>
    <div class="col-sm-10 text-center horizontal-center">
      <h1 class="text-box text-center horizontal-center">Are you interested?</h1>
      <button type="button" class="btn btn-primary btn-lg outline text-center">Find Out More</button>
    </div>
  </div>

CSS:

.horizontal-center {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    float: none;
}

JSFiddle

Answer 1

您可以向左拉图像并将其从容器中取出，然后将 div 设置为 12，这样它将使用整个屏幕

<div class="col-sm-2 pull-left">
      <img src="Images/picture.png" alt="space taking image to push other columns off center" height="100%" width="100%">
 </div>
<div class="container">

  <div class="row spaced">

    <div class="col-sm-12 text-center horizontal-center">
      <h1 class="text-box text-center horizontal-center">Are you interested to find out more? Then click the button below.</h1>
      <button type="button" class="btn btn-primary btn-lg outline text-center">Find Out More</button>
    </div>
  </div>
</div>

https://jsfiddle.net/ygznu3gy/