Bootstrap: How to center a p Element vertically in a div?

Question

How can I vertically center this multiple Line p Element in this div while keeping it at the left side of the page?

I tried already to display the parent div as table but this seems to be marked as !important in the bootstrap css.

Thanks!

<div class="row">
        <div class="col-3">
          <img src="images/pk1.jpg" alt="Telefon">
        </div>
        <div class="col-9">
          <p>asdadadas<br>asdasdasad</p>
        </div>
</div>

Possible duplicate of [Twitter Bootstrap - how to center elements horizontally or vertically](https://stackoverflow.com/questions/10088706/twitter-bootstrap-how-to-center-elements-horizontally-or-vertically) — sol, Dec 16 '17 at 16:54

score 0 · Answer 1 · edited Dec 18 '17 at 11:43

0

Try this:

<div class="row">
            <div class="col-3">
              <img src="images/pk1.jpg" alt="Telefon">
            </div>
            <div class="col-9 text-center">
              <p>asdadadas<br>asdasdasad</p>
            </div>
    </div>

edited Dec 18 '17 at 11:43

iiRosie1

162
2
17

answered Dec 16 '17 at 16:57

Hello Folks

149
10

You should review your answer; `.col-*` and `.row` should not be combined in the fashion you are suggesting. – Robert Dec 16 '17 at 17:18

score 0 · Accepted Answer · answered Dec 16 '17 at 21:07

0

Since you're using v4, use flexbox!

Align items vertically with Bootstrap v4

<div class="row">
    <div class="col-3">
        <img src="images/pk1.jpg" alt="Telefon">
    </div>
    <div class="col-9 d-flex align-items-center">
        <p>asdadadas<br>asdasdasad</p>
    </div>
</div>

answered Dec 16 '17 at 21:07

Josh Bradley

1,854
1
15
31

1

Thanks this helped! Im gonna be looking deeper into flexbox form now on! – Fabian Zbinden Dec 16 '17 at 21:38
@Fabian Zbinden it's highly recommended! The power of flexbox makes your markup cleaner and styling more consistent. This is my goto guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Josh Bradley Dec 16 '17 at 23:08

score 0 · Answer 3 · answered Dec 16 '17 at 21:09

You can use flex technique to achieve this vertical center align with single selector.

.vertical-center {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  }

And in markups should add this CSS selector:

<div class="row">
<div class="col-3">
  <img src="images/pk1.jpg" alt="Telefon">
</div>
<div class="col-9 vertical-center">
  <p>asdadadas<br>asdasdasad</p>
</div>
</div>

tarun joshi · Answer 4 · 2017-12-16T17:09:48.767

-1

   <div class="row">
        <div class="col-sm-3">
            < img src="images/pk1.jpg" alt="Telefon">
        </div>
         <div class="col-sm-9 text-center">
            <p>example</p>
        </div>
</div>

edited Dec 16 '17 at 17:09

answered Dec 16 '17 at 17:03

tarun joshi

107
1
6

This actually centers it horizontally AND vertically. – Fabian Zbinden Dec 16 '17 at 17:39

Bootstrap: How to center a p Element vertically in a div?

4 Answers4