JavaDeveloper JavaDeveloper - 6 months ago 521
CSS Question

Vertical align div inside row bootstrap

I want to reproduce a "tinder-like" view so that the 2 like/dislike buttons are vertically centered inside the row. I have vertically centered the row itself already:

Figure 1 - how i have it now:
enter image description here

Figure 2 - how i want it:
enter image description here

HTML:

<div className="vertical-center">
<div className="container text-center">
<div className="row">
<div className="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button">
<p>Left button</p>
</div>
<div className="col-xs-6 col-sm-6 col-md-6 col-lg-6 vacancy-summary">
<h2>Main page</h2>
</div>
<div className="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button">
<p>Right button</p>
</div>
</div>
</div>
</div>


CSS:

html, body{
height: 100%;
}

h1, h2, h3, p{
margin: 0px;
}

.container{
width:90%;
}

.top5 {margin-top: 5%;}
.top7 {margin-top: 7%;}
.top10{margin-top: 10%;}
.top15{margin-top: 15%;}
.top17{margin-top: 17%;}
.top30{margin-top: 30%;}

.vertical-center {
height:100%;
width:100%;

text-align: center; /* align the inline(-block) elements horizontally */
}

.vertical-center:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}

.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; /* <-- reset the font property */
}

@media (max-width: 768px) {
.vertical-center:before {
display: none;
}
}

.vote-button{
border: solid 1px black;
padding: 10px 0px;
}

.vacancy-summary{
border: 1px solid black;
padding: 25px 0px;
}


I tried a lot of things but it messed up the other vertical alignment, so to be very clear:

2 vertical alignments here:


  1. The whole row needs to be vertically centered (like it is now and it works)

  2. Inside the row, all columns needs to be aligned aswell



Is it something simple I miss or is this to much outside the scope for bootstrap and if so, how do i make it full custom then?

PS: I'm working with React for this, but i don't think this cause any problems

---------EDIT----------

FYI

I have to use className instead of class in my html because i'm using this in a react class (inside the render function).This because "class" is a reserved word in react.

Answer

Just try this and see snippet or Bootply Demo

You have given the class like this class="" insted of className=""

/* CSS used here will be applied after bootstrap.css */
html, body{
  height: 100%;
}

 h1, h2, h3, p{
  margin: 0px;
 }

.container{
  width:90%;
}

.top5 {margin-top: 5%;}
.top7 {margin-top: 7%;}
.top10{margin-top: 10%;}
.top15{margin-top: 15%;}
.top17{margin-top: 17%;}
.top30{margin-top: 30%;}

.vertical-center {
  height:100%;
  width:100%;

  text-align: center;  /* align the inline(-block) elements horizontally */
}

.vertical-center:before {    /* create a full-height inline block pseudo=element */
  content: ' ';
  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; /* <-- reset the font property */
}

@media (max-width: 768px) {
  .vertical-center:before {
    display: none;
  }
}

.vote-button{
  border: solid 1px black;
  padding: 10px 0px;
}

.vacancy-summary{
  border: 1px solid black;
  padding: 25px 0px;
}
.vertical-center .row {
  align-items: center;
  display: flex;
}
<div class="vertical-center">
      <div class="container text-center">
        <div class="row">
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button">
            <p>Left button</p>
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 vacancy-summary">
            <h2>Main page</h2>
          </div>
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 vote-button">
            <p>Right button</p>
          </div>
        </div>
      </div>
    </div>