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/

水平对齐中心，在Bootstrap 3中有偏移

1 个答案: