How Can I Vertically Center Text and Images in Bootstrap 3?

Vertical Centering Text and Images in Twitter Bootstrap 3 (Duplicate)

Numerous inquiries have been made regarding the vertical alignment of text and images in Twitter Bootstrap 3. This topic warrants further discussion.

When using Bootstrap 3 with dynamic content, determining the precise size of visual elements can be challenging. Moreover, the layout should maintain responsiveness.

To vertically center both text and images, consider employing an alternative approach. Instead of floating the elements, set their display to inline-block. Additionally, utilize vertical-align:middle to ensure proper vertical alignment.

Below is an example CSS snippet that demonstrates this technique:

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

By implementing these adjustments, you can effortlessly center your text and images vertically in a responsive manner, even with unknown content dimensions.

For a live demonstration, refer to the following Bootply link:

http://bootply.com/94402

The above is the detailed content of How Can I Vertically Center Text and Images in Bootstrap 3?. For more information, please follow other related articles on the PHP Chinese website!