Text Alignment in Bootstrap

Question

I'm developing a bootstrap style website and I have text that needs centering. I've centered it in the horizontal dimension by using center align but I dont know how to center it vertically in the row.

<div class="col-md-6">
    <p align="center">Some Text that needs centering.</p>
</div>

The 'align="center"' takes care of the horizontal alignment but I dont know how to put the text in the absolute center of the row.

possible duplicate of [What's The Best Way of Centering a Div Vertically with CSS](http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css) — lebolo, May 01 '14 at 17:45

score 1 · Answer 1 · answered May 01 '14 at 17:58

With bootstrap you have text alignment helper classes:

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

http://getbootstrap.com/css/#type-emphasis (you need to scroll down a little)

you can also set an element to display: block and center via margin.

<div class="center-block">...</div>

paragraph tags should automatically be block level elements

score 0 · Answer 2 · answered May 01 '14 at 17:55

0

Hope this will work.

<div class="col-md-6">
  <p style="display:inline-block; vertical-align:middle">Some Text that needs centering.</p>
</div>

answered May 01 '14 at 17:55

wahid

1,150
1
9
16

score 0 · Answer 3 · answered May 01 '14 at 18:14

Here's an example that should help it retains the bootstrap class. You can also view it in this demo.

HTML

   <div class="cont .col-md-6">
    <h1>Some text</h1>
    </div>

CSS

    .cont {
     border: 1px solid #333;
     width: 400px;
     background: #eee;
  }

Text Alignment in Bootstrap

3 Answers3