Centering Text In a Div: Bootstrap

Question

I'm trying to center my text in a div (vertically and horizontally), but I am using the bootstrap3 grid system so I can't seem to find an applicable answer. Most answers that I found require a table.

Here is my markup:

<div class="row">

    <div class="col-xs-4">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4">
        This is the text that I want to center...
    </div>

</div>

Like this? http://stackoverflow.com/questions/9382970/how-to-center-a-box-thing-with-bootstrap — chrisjlee, Nov 13 '13 at 18:24

Will · Answer 1 · 2013-11-13T18:40:10.777

1

<div class="row">

    <div class="col-xs-4 text-center" style="vertical-align: middle;">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4 text-center" style="vertical-align: middle;">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4 text-center" style="vertical-align: middle;">
        This is the text that I want to center...
    </div>

</div>

edited Nov 13 '13 at 18:40

answered Nov 13 '13 at 18:33

Will

2,790
19
22

That only centers horizontally. Let's say that each div has a height of 250px. How can I center the text vertically as well? – Rhs Nov 13 '13 at 18:34
Edited to add vertical alignment. – Will Nov 13 '13 at 18:40

score 0 · Answer 2 · answered Nov 13 '13 at 18:33

0

 <div class="row">

    <div class="col-xs-4" style="text-align:center; vertical-align:middle">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4" style="text-align:center; vertical-align:middle">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4" style="text-align:center; vertical-align:middle">
        This is the text that I want to center...
    </div>

</div>

It is better if you create CSS class- like

   .cAlign{
        text-align:center;
vertical-align:middle
    }
<div class="row">

    <div class="col-xs-4 cAlign">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4 cAlign">
        This is the text that I want to center...
    </div>


    <div class="col-xs-4 cAlign">
        This is the text that I want to center...
    </div>

</div>

answered Nov 13 '13 at 18:33

Dawood Awan

7,051
10
56
119

That only centers horizontally. How can I center the text vertically as well? – Rhs Nov 13 '13 at 18:33
Also your CSS class is unnccessary as bootstrap already comes with that class .text-center – Rhs Nov 13 '13 at 18:36
@Rhs see my edit, you can use the vertical-align:middle to center text vertically – Dawood Awan Nov 13 '13 at 18:37
http://stackoverflow.com/questions/9249359/text-vertical-align-in-a-div see this link to align vertical – Dawood Awan Nov 13 '13 at 18:37

score 0 · Accepted Answer · answered Nov 13 '13 at 18:47

0

In 2013, you should consider using the absolute centering method.

Add to your CSS:

.hv-center-wrap {
  position: relative;
}

.hv-center {
  position: absolute;
  overflow: auto;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  height: 500px; /* height must be set to work, percentages will work */
}

Add class .hv-center to any element that you want both horizontal and vertical centering. Then wrap the element around an outer div .hv-center-wrap.

(vertical-align: middle will not center the text vertically. That only works for specific elements, not divs.)

answered Nov 13 '13 at 18:47

Michelle

2,702
2
23
35

I think this works. but it's really difficult to calibrate the width and height. – Rhs Nov 14 '13 at 18:00
It's a tradeoff, but personally I think this solution is much better than table-oriented ones. – Michelle Nov 14 '13 at 19:39

Centering Text In a Div: Bootstrap

3 Answers3