CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Sumon Khan
Sumon Khan

Reputation: 1

Veritcally aligning text within Bootstrap

Could anyone please help me; how do I center text vertically within a responsive grid?

<div class="col-md-4">
    <h1>YOU CAN'T</h1>
</div>

Upvotes: 1

Views: 64

Answers (3)

BrainHappy
BrainHappy

Reputation: 432

By vertically aligning it, I'm guessing you mean centered text? If so:

<div class="col-md-4">
   <h1 class="text-center">YOU CAN</h1>
</div>

If you mean to center your text within a section, I would specify my margin-top in different media queries

Upvotes: 0

D. Melo
D. Melo

Reputation: 2239

Since we don't have an example, I can admit adjusting the margin-top will do it

http://jsfiddle.net/F7rHQ/

h1{
    margin-top: 10px;
}

Update some adaptations to the first option considering font-size: http://jsfiddle.net/zgwnP/

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362300

The problem is you're vertically centering a DIV of unknown height. You can use a CSS transform like this:

.v-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Demo: http://bootply.com/106258

Upvotes: 1

Related Questions