can't vertical align content within a row [duplicate] - css

Question

This question already has answers here:
Bootstrap Vertical Center contents in row
(2 answers)
Closed 4 years ago.
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;
}

Answer 2

Created a sample fiddle from your code
Added a small css change
.container{
display: flex;
align-items: center;
width: 500px;
height: 100px;
border: 1px solid #888;
justify-content: center; //remove horizontal align by removing this
}
.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;
}
.container{
display: flex;
align-items: center;
width: 500px;
height: 100px;
border: 1px solid #888;
justify-content: center;
}
.container>*{
margin: 0px 3px;
}
<div class="container">
<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>
Edit the Fiddle here