Horizontal align center with offset in Bootstrap 3

Question

I have a bootstrap 3 based layout, with two columns, how can I make sure the text in the second aligns with the center (horizontal) of the page?

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

by center you mean dead-center? https://coderwall.com/p/tmpr2g/dead-center-positioning-css-only-horizontal-vertical — ymz, Jan 18 '16 at 23:51
Possible duplicate of [How to align text vertically center in div with CSS?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — Oss, Jan 19 '16 at 00:03
@MohamedOsama I am after a horizontal center (relative to whole page, not just my column div — George Edwards, Jan 19 '16 at 00:10
Obvious workaround I just thought, make column equal 8 not 10... — George Edwards, Jan 19 '16 at 00:13

Keith Nicholas · Answer 1 · 2016-01-19T22:10:41.933

You can pull the image left and take it out of the container, then make the div 12 so it will use the whole screen

<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/

Horizontal align center with offset in Bootstrap 3

1 Answers1