1

I am using bootstrap 3 for this current project and am having trouble vertically aligning some text.

Here is the HTML markup:

<div class="row overview-item">
            <div class="col-sm-3">
                <div class="overview-item-header">
                    <h3>Web design</h3>
                </div>
            </div>
            <div class="col-sm-9">
                <div class="overview-item-desc">
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
                </div>
            </div>
        </div>

Here is the CSS markup:

.overview-item{
    margin-top:25px;
    margin-bottom:25px;
}
.overview-item-header{
    display: table;
    width: 100%;
}

.overview-item-header h3{
    display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.overview-item-desc{
    color:#ffffff;
    background-color:#337ab7;
    padding:25px;
}

Here is a screenshot of the output: https://i.stack.imgur.com/V11fx.png

The text in col 3 needs to be in the middle (vertical) with the blue box. The issue is mainly that as the window gets resized, the size of the blue box gets larger. Any suggestions on how to fix this problem will be greatly appreciated.

user3529649
  • 35
  • 7

1 Answers1

0

The first answer, here, could be interesting

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

CSS :

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
Community
  • 1
  • 1
DadaArno
  • 193
  • 2
  • 16
  • This isn't doing it, unfortunately this also changes the order of the elements. But the main concern is that this still does not center the text. – user3529649 May 27 '15 at 12:35