Bootstrap 3.3.7中如何实现图片列垂直居中？附基础代码

Since Bootstrap 3's grid system relies on floats (not flexbox by default), we have a few reliable methods to vertically center your image column while keeping the equal-height behavior from row-eq-height. Here are three straightforward approaches:

Solution 1: Table-Cell Display (Leveraging Equal Height Rows) #

This method works seamlessly with the row-eq-height class (which uses table-based layout under the hood). We’ll add a custom class to the image column to enable vertical alignment:

Step 1: Add Custom CSS #

/* Vertical align for table-cell columns */
.vertical-center-col {
    display: table-cell !important;
    vertical-align: middle;
    float: none; /* Override Bootstrap's default column float */
}

Step 2: Update Your HTML #

Attach the vertical-center-col class to your image column:

<div class="list-content sales">
    <div class="row row-eq-height">
        <div class="col-sm-2 col-xs-12 vertical-center-col" style="border: 1px solid black;">
            <img src="https://picsum.photos/223/176" class="img-responsive img-rounded">
        </div>
        <div class="col-sm-10 col-xs-12" style="border: 1px solid black;">
            <div class="sale-details">
                <h2>Sale Test</h2>
                <i class="fa fa-heart-o" aria-hidden="true"></i>
                <!-- Rest of your content -->
            </div>
        </div>
    </div>
</div>

Solution 2: Absolute Position + Transform (No Layout Changes) #

This approach avoids modifying display properties, making it safe for layouts that depend on Bootstrap’s default float behavior:

Step 1: Add Custom CSS #

/* Parent column needs relative positioning */
.col-relative {
    position: relative;
}

/* Vertically center the image */
.vertical-center-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Keep image responsive */
    max-width: 100%;
    height: auto;
}

Step 2: Update Your HTML #

Apply the classes to your image and its parent column:

<div class="list-content sales">
    <div class="row row-eq-height">
        <div class="col-sm-2 col-xs-12 col-relative" style="border: 1px solid black;">
            <img src="https://picsum.photos/223/176" class="img-responsive img-rounded vertical-center-img">
        </div>
        <div class="col-sm-10 col-xs-12" style="border: 1px solid black;">
            <div class="sale-details">
                <h2>Sale Test</h2>
                <i class="fa fa-heart-o" aria-hidden="true"></i>
                <!-- Rest of your content -->
            </div>
        </div>
    </div>
</div>

Solution 3: Flexbox (Modern Browser Approach) #

If you don’t need to support older browsers (like IE9 and below), flexbox is a clean and powerful option. We’ll replace the row-eq-height class with a custom flex row:

Step 1: Add Custom CSS #

/* Flex row that centers items vertically */
.flex-center-row {
    display: flex;
    align-items: center;
    /* Optional: Ensure columns wrap on mobile */
    flex-wrap: wrap;
}

Step 2: Update Your HTML #

Swap row-eq-height with flex-center-row:

<div class="list-content sales">
    <div class="row flex-center-row">
        <div class="col-sm-2 col-xs-12" style="border: 1px solid black;">
            <img src="https://picsum.photos/223/176" class="img-responsive img-rounded">
        </div>
        <div class="col-sm-10 col-xs-12" style="border: 1px solid black;">
            <div class="sale-details">
                <h2>Sale Test</h2>
                <i class="fa fa-heart-o" aria-hidden="true"></i>
                <!-- Rest of your content -->
            </div>
        </div>
    </div>
</div>

All three methods will vertically center your image column while maintaining responsiveness. Pick the one that best fits your browser support needs and existing layout!

内容的提问来源于stack exchange，提问作者randombits