CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rhs
Rhs

Reputation: 3318

Centering Text In a Div: Bootstrap

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>

Upvotes: 0

Views: 3945

Answers (3)

Michelle
Michelle

Reputation: 2712

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.)

Upvotes: 0

Will
Will

Reputation: 2880

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

Upvotes: 1

Dawood Awan
Dawood Awan

Reputation: 7318

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

Upvotes: 0

Related Questions