vertical align middle content with bootstrap 3

Question

I want to set vertical middle content in div block with latest bootstrap v3.2.0.

I have Read the answer to vertical-align with bootstrap 3, but it uses float:none; in div block.

However, I can't use float:none; in div block according to our layout.

I have this code:

<div class="container">
  <div class="col-lg-4">....</div>
  <div class="col-lg-5">....</div>
  <div class="col-lg-3">....</div>
</div>

Content Height is dynamic in block 1. I want to set vertical middle content in block 2 and 3 according to block 1 height.

This is how our layout currently looks:

       Block 1           Block 2            Block 3
 ------------------ ------------------ ------------------
|  Content Height  |      Content     |      Content     |
|        is        |------------------ ------------------
|     Dynamic      | 
 ------------------

if, I will use float:none; So, This is Our layout looks:

       Block 1           Block 2        
 ------------------ ------------------ 
|  Content Height  |                  |
|        is        |      Content     |
|     Dynamic      |                  |
 ------------------ ------------------ 
       Block 3
 ------------------
|      Content     |
 ------------------

This is how I would like it to look:

       Block 1           Block 2            Block 3
 ------------------ ------------------ ------------------
|  Content Height  |                  |                  |
|        is        |      Content     |      Content     |
|     Dynamic      |                  |                  |
 ------------------ ------------------ ------------------

Find out the height of a div at http://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript and place in "Block 2" and in "Block 3" and some other css will make align vertical center. — Sushan, Aug 05 '14 at 13:47

Stephan Wagner · Accepted Answer · 2014-08-06T12:00:10.813

7

I found the best way to achieve that is to create a table layout within the container:

Check out this fiddle: http://jsfiddle.net/StephanWagner/Zn79G/9/embedded/result

<div class="container">
  <div class="table-container">
    <div class="col-table-cell col-lg-4">A<br>A<br>A<br>A<br>A<br>A<br>A</div>
    <div class="col-table-cell col-lg-5">B</div>
    <div class="col-table-cell col-lg-3">C</div>
  </div>
</div>

@media (min-width: 1200px) {

     .table-container {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}

The media query makes sure the content will only be a table in large displays, otherwise it will stack as it used to.

edited Aug 06 '14 at 12:00

answered Aug 05 '14 at 13:48

Stephan Wagner

990
1
8
17

Thats exactly what you achieve with this: http://jsfiddle.net/StephanWagner/Zn79G/1/embedded/result/ To make this work for wur layout change the -md- classes back to -lg- and change the ```min-width: 992px``` to ```min-width: 1200px``` – Stephan Wagner Aug 06 '14 at 07:45
Here is an updated fiddle with a large layout: http://jsfiddle.net/StephanWagner/Zn79G/4/embedded/result/ Make sure to move your screen to over 1200px in width – Stephan Wagner Aug 06 '14 at 07:49
Thanks, but, If, i will use this code so, it is not work. any solution. `
A
A
A
A

B

C
` – HDP Aug 06 '14 at 08:04
Can you provide a fiddle or a link where I can see why it is not working in your code? (Remember to add the ```
```). The problem is that a vertical-align set to middle is only really working in a table cell, and a table-cell can not have a float.
– Stephan Wagner Aug 06 '14 at 08:10
Here you go, works like a charm: http://jsfiddle.net/StephanWagner/Zn79G/9/embedded/result/ – Stephan Wagner Aug 06 '14 at 08:36
one more issue create. please see this maybe, you can help me. http://stackoverflow.com/questions/25159115/image-max-width-not-working-in-firefox/25159417#25159417 – HDP Aug 06 '14 at 11:50
Hi, again, if, i use Push/pull columns in this code. So, not work Push/pull. any possibility there. – HDP Aug 30 '14 at 09:02

score 3 · Answer 2 · answered Aug 05 '14 at 13:49

3

This worked for me:

.container > div {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

bootply example

answered Aug 05 '14 at 13:49

j08691

204,283
31
260
272

... but I cannot use `float:none;` in a div block according to our layout. – KyleMit Aug 05 '14 at 13:53
Then I don't see another way to do it. Why can't you use float:none on this one div? – j08691 Aug 05 '14 at 13:54
Sorry for the confusion. That's not my restriction; it was a quote from OP. It seems OP knows how to do it when using `float:none` – KyleMit Aug 05 '14 at 13:56
@j08691 I have update Our question. I hope, You can clearly understand now. – HDP Aug 06 '14 at 05:59

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

.container {
  position: relative;
  height: 14rem;
  border: 1px solid;
}

.jumbotron {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  border: 1px dashed deeppink;
}

<div class="container theme-showcase" role="main">
  <div class="jumbotron">
    I want to center this div with Bootstrap.
  </div>
</div>

Get from [Solved] Vertically center with Bootstrap

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 02 '18 at 08:19

Cubiczx

1,005
11
10

you should put some explanations – Azzabi Haythem Mar 02 '18 at 08:44

score 0 · Answer 4 · edited Aug 05 '14 at 14:01

0

I think this is the solution with bootstrap 3: http://jsfiddle.net/raffi/52VtD/7348/

.col-lg-4 {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

edited Aug 05 '14 at 14:01

KyleMit

30,350
66
462
664

answered Aug 05 '14 at 13:47

raffi

139
1
9

I have update Our question. I hope, You can clearly understand now. – HDP Aug 06 '14 at 06:00

vertical align middle content with bootstrap 3

4 Answers4

Linked