How to Vertically Center Content in Bootstrap 3?

Vertically Center Content in Twitter Bootstrap 3

When working with dynamic content in Bootstrap 3, a common challenge is vertically centering both text and images, especially when their sizes can vary. Here's how you can achieve this responsive, vertically centered layout:

Solution:

Instead of using the traditional float property, opt for display:inline-block and apply vertical-align:middle to the relevant elements with the following CSS:

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

Explanation:

• display:inline-block allows elements to sit side by side while maintaining the ability to apply height and width.
• vertical-align:middle aligns the vertical center of the element with the middle of its parent.
• The negative margin-right adjusts the spacing between elements for a more refined layout.

Demo:

For a live demonstration, visit: http://bootply.com/94402

This solution ensures that both text and images are vertically centered within their respective columns, even when their sizes change dynamically, providing a responsive and visually appealing layout.

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