3

I am using bootstrap grid system to build website

There is a text inside div and I would like to vertical align it to middle

enter image description here

Current HTML are

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 right">
    <p>Hatha with Steve Smith</p>
    <p>Pure Yoga is dedicated to serving the yoga community in Asia by offering diverse yoga practices - Vinyasa, Hatha, Hot, Wall Rope Yoga, Pre-Natal, &amp; more...</p>
</div>

And CSS

@media (min-width: 1140px)
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
}

.video_bar .right p:first-child {
    font-size: 15px;
    font-weight: bold;
    margin-top: 30px;
}

So you can notice that right now the text is using margin-top to pretend the align middle, and the best practice is not that. How to fix that?

Demo site:

http://internal001.zizsoft.com/yoga/section/beginners

Thanks for helping.

Alex
  • 8,461
  • 6
  • 37
  • 49
user782104
  • 13,233
  • 55
  • 172
  • 312
  • 3
    Short answer : you can't ; best way for vertical align is usually with Table element... (or with JS edit on the fly, that get the height of everything after rendering and add margin to get a 50%) – Blag Nov 11 '15 at 13:48
  • 3
    Possible duplicate of [How to align text vertically center in div with CSS?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) – allicarn Nov 11 '15 at 13:54
  • There are even more duplicates re: this question/problem. There are also multiple ways to tackle this problem as well... – McVenco Nov 11 '15 at 13:58

1 Answers1

4

Try this

CSS

.video_bar .left {
    border-right: 1px solid #e2e2e2;
    display: table-cell;
    float: none;
    padding: 0;
    position: relative;
    vertical-align: middle;
}

.col-lg-9.col-md-9.col-sm-9.col-xs-12.right {
    display: table-cell;
    float: none;
    vertical-align: middle;
}

.video_block a, 
.video_bar a {
    color: #666666;
    display: table;
}

Edit Since your breaking point is sm you need vertical-align: middle on >768px so you can use this code only for that like this 

@media (min-width: 768px) {
    .video_bar .left {
        border-right: 1px solid #e2e2e2;
        display: table-cell;
        float: none;
        padding: 0;
        position: relative;
        vertical-align: middle;
    }

    .col-lg-9.col-md-9.col-sm-9.col-xs-12.right {
        display: table-cell;
        float: none;
        vertical-align: middle;
    }

    .video_block a, 
    .video_bar a {
        color: #666666;
        display: table;
    }
}

And on small width you will keep boostrap layout.

Nenad Vracar
  • 118,580
  • 15
  • 151
  • 176