I'm currently incorporating Twitter Bootstrap and facing a challenge with centering text vertically next to an image that exceeds the size of the text.
The use of line-height is not feasible as the text spans multiple lines and may be subject to additions; hence, I attempted the
display: table; display: table-cell;Below is my HTML markup for the specified 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;
}
... check out the live example on CodePen: http://codepen.io/anon/pen/XbdRXE