Limitless Limitless - 2 months ago 6
CSS Question

Vertical align entire row in BS 3

im trying to vertical center the bootstrap 3 row. i got no other content on the site other than the html u see here. so far it didnt really work. I tried some codes i found on the internet but they all seem not to work. As you can see i tried to wrap everything after the container in a seperate div so the row would middle inside of it. Doesnt work sadly.

<?php include_once ("header.php") ?>

<div id="bg"><div>

<div class="container">
<!-- Navigation area -->
<?php include_once ("navigation.php");?>
</div>

<div class="container">
<div class="vertical">
<div id="fade" class="about-wrapper animated fadeInLeft">
<div class="row">
<div class="col-xs-6 nova">
<img class="img-responsive" src="../covers/nova-about.png" alt="" />
</div>
<div class="col-xs-6 opa">

<div class="title">
<h3>Leo</h3>
</div>

<div class="title">
<h3>Age 7</h3>
</div>

<div class="title">
<h3>Character</h3>
</div>

<div class="describ">
<p>
Leo is calm, playful and a tiny guard dog. He is very social and loves to play with other dogs.
<br> He gets a little greedy when you caress him but he can also like it to relax alone on the couch. Overall a Dream dog to have and we are lucky he is ours.
</p>
</div>

<div class="title">
<h3>Introduction to the Family</h3>
</div>

<div class="describ">
<p>
Leo was our first dog we had. We nearly took a different one but as she was reserved, he "puppy-eyed" his way into Roannes heart.
<br> His young appearence made him even more sympathetic and he enjoyed it instantly with his new Family.
<br>
<br><strong>Fun fact:</strong> I randomly met the real owner in the bus and he told me leo was only sent to SPA because he cant be alone in the house and was making too much noise. Well, lucky us!
</p>
</div>

</div>

</div>
</div>
</div>
</div>


<?php include_once ("footer.php") ?>


The CSS

.vertical {
display: inline-block;
vertical-align: middle;
float: none;
}


Edit: To clear things up, i want the Row itself to be middled so i dont have ot play round with
top: 25vh
as i think it might be to inconsistent.

Answer

The following CSS seems to be giving the desired result:

.row {
    display: flex;
    align-items: center;
    min-height: 100vh;
}

Check out the fiddle that I made for this problem: https://jsfiddle.net/2678jhbh/2/

Comments