Bootstrap：如何在列中垂直居中内容

Question

I have spent hours on this problem now and have read through countless questions, but none of the provided solutions works for me, so I'm now just gonna post my specific problem:

I want to build a row with four columns. The first three columns have pictures in them and the fourth column has a text description that I want to show vertically centered (meaning with an equal margin on the top and bottom that is obviously not fixed, but responsive to changing screen-sizes). Here's the code:

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-4 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-3 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-1 col-sm-6">
                <div class="container-fluid">
                    <p>Some text that is supposed to be vertically centered within the column</p>
                </div>
            </div>
        </div>
    </div>
</section>

It must have to do something with the Bootstrap specific classes that non of the CSS-based solutions I can find on this works. How can I make it work in this particular example? Feel free to make any changes you want on this part:

<div class="container-fluid">
    <p>Some text that is supposed to be vertically centered within the column</p>
</div>

However the rest of the structure should remain unchanged if possible (including the col-lg-1).

Your help is greatly appreciated!

Answer 1

You can use flexbox. Make your outer div , display: flex and use The property align-items to make it's contents vertically center. Here is the code:

#outerDiv{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

Answer 2

在Bootstrap 4中，将“align-self-center”-class添加到col，您希望内容垂直居中。

Answer 3

The following code will center items perfectly within a div:

display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
justify-content: center;

Answer 4

All you need to do is adding below snippet to your CSS.

just like this.

.row{ display: flex; align-items: center;}

I tried the same code and got output too. if you want to see, download the file and run it.

https://www.dropbox.com/s/0x7iqi6alayd8xg/VerticallyCentered.html?dl=0