vertical-align:middle does not align content in the middle when used with bootstrap columns

Question

I have three column's and the middle column has a button which i want to vertially align in the middle.

<div class="row">
    <div class="col-md-1">
        <div class="mypanel">
        </div>
    </div>
    <div class="col-md-1">
        <div class="mypanel">
            <div style="vertical-align:middle">
                <button type="button">Click</button>
            </div>
        </div>
    </div>
    <div class="col-md-1">
        <div class="mypanel">

        </div>
    </div>
</div>

Style

  .mypanel {
        height: 200px;
        border: 1px solid black;
    }

However vertical-align:middle does not make any affect on the content of the div

DEMO

sorry Wrong link. should work now. – LP13 Sep 06 '17 at 17:51 — LP13, Sep 06 '17 at 17:51

score 1 · Accepted Answer · answered Sep 06 '17 at 17:46

1

.mypanel {
    height: 200px;
    border: 1px solid black;
    display:table;
}

 .mypanel div{
    display:table-cell;
    vertical-align:middle
}

this will solve the problem https://jsfiddle.net/xyx3enz1/

answered Sep 06 '17 at 17:46

Pushpender

193
1
11

score 0 · Answer 2 · answered Sep 06 '17 at 17:25

  .mypanel {
        height: 100px;
        width: 100%;
        display: table;
        border: 1px solid black;
    }
    .text-centered {
                text-align: center;
                display: table-cell;
                vertical-align: middle;
     }

<div class="row">
    <div class="col-md-1">
        <div class="mypanel">
        </div>
    </div>
    <div class="col-md-1">
        <div class="mypanel">
            <div class="text-centered">
                <button type="button">Click</button>
            </div>
        </div>
    </div>
    <div class="col-md-1">
        <div class="mypanel">

        </div>
    </div>
</div>

score 0 · Answer 3 · answered Sep 06 '17 at 17:37

My favorite approach is to use pseudo elements like :after to create an element, set its height, and then vertical align based on that. It doesn't require much CSS either:

// I changed the col-md-1 to col-md-4 for this example
.col-md-4 {
  text-align: center;
  height: 200px;
}

.col-md-4 .mypanel {
   height: 100%; // Make sure .mypanel is set to 100% height otherwise our pseudo element won't know what 100% height is
}

// Here is the pseudo element, set the vertical align here and on your button
.col-md-4:nth-child(2) .mypanel:after {
   content: '';
   height: 100%;
   display: inline-block;
   vertical-align: middle;
}

.col-md-4:nth-child(2) .mypanel button {
   vertical-align: middle;
   display: inline-block;
}

Check out this working jsFiddle.

vertical-align:middle does not align content in the middle when used with bootstrap columns

3 Answers3