How Can I Vertically Center Content in Bootstrap 3?

Vertical Centering Content in Twitter Bootstrap 3

For a responsive and dynamic vertical alignment of text and images in Bootstrap 3, consider the following approach:

CSS Code:

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

Explanation:

The provided CSS makes necessary changes to the original Bootstrap columns:

• float: none removes horizontal alignment, allowing for vertical alignment.
• display: inline-block treats columns as inline elements, which can be vertically aligned.
• vertical-align: middle vertically centers the content within the columns.
• margin-right: -4px corrects minor spacing issues between columns.

Demo:

Visit [http://bootply.com/94402](http://bootply.com/94402) to see a functional demonstration of this solution.

Additional Notes:

• Ensure the container elements have sufficient height for the vertical alignment to work.
• If you need different column sizes, adjust the col-lg classes accordingly.
• If you encounter issues with different image sizes, adjust the vertical-align property as needed.

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