0

I'm using Twitter Bootstrap and am trying to vertically center text next to an image that is larger than the current text.

I can't use line-height because the text goes over more than one line and I also want to allow for possible additions to the text; so I went to the display: table; display: table-cell; method but it still refuses to work.

Here is my HTML for the respective section:

<div class="fs">
    <div class="container">
        <div class="wrapper row">
            <div class="icon col-md-2">
                <a href="" target="blank">
                    <img src="fs-icon.jpg" width="170" height="76" alt="Flying Solo Icon">
                </a>
            </div>
            <div class="text col-md-10">
                <span>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt, lacus sed pharetra luctus, odio purus faucibus nunc, mattis molestie sapien libero sit amet leo.
                </span>
            </div>
        </div>
    </div>
    <!-- Container Ends -->
</div>
<!-- FS Ends -->

CSS:

#about .fs {
    padding: 30px 0;
}

#about .fs .wrapper {
    display: table;
}

#about .fs .icon {
    display: table-cell;
}

#about .fs .text {
    display: table-cell;
    min-height: 76px;
    vertical-align: middle;
}

... and here it is on CodePen: http://codepen.io/anon/pen/XbdRXE

Brett
  • 19,449
  • 54
  • 157
  • 290

1 Answers1

0

I think the CSS may be clashing with the behavior of the default Bootstrap CSS. However, you could bypass this method altogether and try using this as a custom class:

.vertical-center {
    display: inline-block;
    vertical-align: middle;
    float: none;
}

Just apply it to your span element.

John Bell
  • 2,350
  • 1
  • 14
  • 23