CODEWITHSUNDEEP
htmltwitter-bootstrapcss
anguish
anguish

Reputation: 458

CSS / Bootstrap: Text align vertically center

I have a webproject using bootstrap. There is an Layout with two columns. The left column has an image and the right one has an text. The text should be vertically centered to the image. The first problem was to get the columns the same height. I found the following working solution:

.col {
  margin-bottom: -99999px;
  padding-bottom: 99999px;
  height:100%;
}

To get the text centered vertically I inserted the following html in the right row:

<div class="table">
  <div class="cell">My text</div>
</div>

CSS:

.table {
  height:100%;
  width:100%;
  display:table;   
}

.cell {
  display:table-cell;
  vertical-align:middle;
  height:100%;
}

But I don't get the table and its cell to height 100% of the parent. Position absolute not working too, because bottom:0 is 99999px;

Anybody has an idea what I can do? Thanks

Upvotes: 0

Views: 1198

Answers (1)

Marco-dev
Marco-dev

Reputation: 202

I think that if you can do it, try to use flex-box instead of a fixed grid.

Here's your CodePen for an example: http://codepen.io/anon/pen/RaNYLG

HTML: 

<div class="row">
  <div class="column">
    <p> Here you have some content.</p> 
  </div>
  <div class="column">
    <p> Here you can have a lot of text as well, but i will make longer since you need to understand how to vertically align your content. In this case you will see that the content being aliged will be the other. Take this just as an example.</p>
  </div>
</div>

And CSS:

.row{
  display:flex;
}

.column{
  display:flex;
  width:50%;
  align-items:center;
}

(And to learn how to properly use the flex property: http://flexboxfroggy.com/)

Upvotes: 1

Related Questions