Clever Geek Handbook

Bootstrap: how to center content vertically within a column

I've spent hours on this problem now and read countless questions, but none of the solutions provided work for me, so now I'll just post my specific problem:

I want to plot a row with four columns. The first three columns have images in them, and the fourth column has a text description that I want to show vertically centered (which means with equal margins at the top and bottom, which is not explicitly fixed, but responsive to screen resizing). 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>

Maybe something needs to be done with specific Bootstrap classes that cannot be found based on CSS based solutions. How can I make it work for this specific example? Feel free to make any changes to 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 col-lg-1).

Your help is greatly appreciated!

+3


source to share


4 answers


You can use flexbox. Make your outer div

, display: flex

and use the property align-items

to make its content vertically centered. Here is the code:



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


source


The following code will center the elements within the div:



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


source


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

just.

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

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

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

0


source


Here is the code with jQuery.

https://www.dropbox.com/s/nj38bcnadguaraf/VerticallyCentered_V2.html?dl=0

I think this will work for you.

0


source






More articles:


All Articles