How to Achieve Perfect Vertical Text and Image Alignment in Bootstrap 3?

Vertical Text and Image Alignment in Twitter Bootstrap 3

Despite the prevalence of inquiries on this topic, achieving vertical alignment of text and images in Twitter Bootstrap 3 can be elusive, especially for dynamic content with varying dimensions.

To address this challenge, a Bootply demonstration has been created to illustrate the desired layout, where the text and image are centered vertically, regardless of their relative sizes.

The solution lies in employing display:inline-block instead of float for the text and image columns. This allows us to use vertical-align:middle with the following CSS:

.col-lg-4, .col-lg-8 {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: -4px;
}

By setting margin-right to a negative value, we ensure that the columns are placed side by side, while maintaining their vertical alignment.

To test this approach, navigate to the demo at http://bootply.com/94402, where the text and image are correctly centered vertically, adapting to varying content sizes.

The above is the detailed content of How to Achieve Perfect Vertical Text and Image Alignment in Bootstrap 3?. For more information, please follow other related articles on the PHP Chinese website!