can't vertical align content within a row

Question

I'm going crazy being unable to align some elements to the centre of a Bootstrap row. The only thing that seems to work is positioning some elements as absolute relative to the row, but I would like to avoid this as it would be an issue adjusting the horizontal gaps between objects when it comes to responsiveness. Could you advice a more efficient way to vertically align all the content within the following row element? My code below: PS. I'm using bootstrap 3.0 and SCSS

HTML

<div class="standard-container">
  <div class="row title-menu-row">
      <div class="col-md-4 title-menu-col">
        <h1>Your predictions</h1>
      </div>
      <div class="col-md-7 title-menu-col">
        <span class="badge badge-error pmd-ripple-effect">12</span>
        <span>Not predicted yet</span>
        <div class="onoffswitch">
            <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
            <label class="onoffswitch-label" for="myonoffswitch"></label>
        </div>
      </div>
      <div class="col-md-1 title-menu-col icons">
        <a href="#">
          <span class="fa-layers fa-fw" style="">
            <i class="fal fa-female" data-fa-transform="shrink-3 up-1 left-6"></i>
            <i class="fal fa-male" data-fa-transform="shrink-3 down-1"></i>
          </span>
        </a>
        <a href="#">
          <i class="fal fa-table"></i>
        </a>
      </div>
  </div>

SCSS

// ---------------  Toggle switch ---------------
.onoffswitch {
    position: relative; width: 48px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
    display: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 24px; padding: 0; line-height: 24px;
    border: 2px solid #F1F1F5; border-radius: 24px;
    background-color: #F1F1F5;
    transition: background-color 0.3s ease-in;
}
.onoffswitch-label:before {
    content: "";
    display: block; width: 24px; margin: 0px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 22px;
    border: 2px solid #F1F1F5; border-radius: 24px;
    transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: #2DC76D;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: #2DC76D;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px;
}

//---------------all else -----------------


.standard-container {
    padding: 0;
    margin: 170px 0 0 155px;

    .title-menu-row, .title-menu-col {
        margin: 0;
        padding: 0;
    border: 1px solid red;
    }
    h1 {
        color: rgba(117, 64, 238, 1);
        margin: 0;
    }
}

.title-menu-row {

    margin-bottom: 100px !important;
    vertical-align: top;
    .title-menu-col {
    }
    .onoffswitch {
        display: inline-block;
        .onoffswitch-label {
            margin: 0;
        }
    }
    .icons {

    }

    .icon > a, .icons > a {
        color: rgba(117, 64, 238, 1);
        font-size: 20px;
    }
    .icon:first-child > a {
        margin-right: 200px;
    }
}

Here's a CodePen illustrating the issue. https://codepen.io/alopez25/live/PRNayZ

Answer 1

Try -

display: flex;
align-items:center;

Here jsfiddle -

https://jsfiddle.net/5v35gvr7/1/

<div class="wrap">
    <div class="inner-wrap">Hello</div>
    <div class="inner-wrap">Hello</div>
</div>


.wrap{
  height: 30px;
  background: green;
  display: flex;
  align-items: center;
}
.inner-wrap{
  margin: 0px 10px;
  background: blue;
  display: inline-block;
}