Question

我疯了，无法将某些元素与Bootstrap行的中心对齐。似乎唯一有用的是将一些元素定位为相对于行的绝对元素，但我想避免这种情况，因为在响应性方面调整对象之间的水平间隙是一个问题。您能否建议一种更有效的方法来垂直对齐以下行元素中的所有内容？我的代码如下： PS。我正在使用bootstrap 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;

这里是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

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

添加了一个小的CSS更改

.container{
 display: flex;
 align-items: center;
 width: 500px;
 height: 100px;
 border: 1px solid #888;
 justify-content: center; //remove horizontal align by removing this
}

＆＃13;

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

＆＃13;

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

＆＃13;

编辑小提琴 here

无法垂直对齐行内的内容

2 个答案: