不能在一行中垂直对齐内容

Question

我要疯了，因为无法将一些元素对齐到引导行的中心。唯一起作用的似乎是将某些元素定位为相对于行的绝对位置，但我想避免这一点，因为在响应性方面，这将是一个调整对象之间水平差距的问题。您能否建议一种更有效的方法来垂直对齐下面的行元素中的所有内容？我的代码如下: PS。我正在使用引导3.0和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;
    }
}

下面是一个说明这个问题的CodePen。https://codepen.io/alopez25/live/PRNayZ

Answer 1

试着-

display: flex;
align-items:center;

在这里，小小提琴-

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

从您的代码创建了一个示例小提琴

添加了一个小的css更改

.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>

​

编辑Fiddle 这里