html - 列中间的垂直对齐按钮 - bootstrap

Question

我正在使用 Bootstrap 并尝试垂直对齐列中的按钮。

注意:我不能使用 flex，也不能按照标准定义高度。

如果我使用边距，它将无法在平板电脑和移动设备上使用。

下面是我的代码:

.col-xs-2, .col-xs-6 {
   display: inline-block;
}
.col-xs-2 {
    vertical-align: middle;
     
}

<div class="container">
    <div class="row">
    <div class="col-xs-4">
             <h4>Some really large label that will wrap to multiple lines in small screens</h4>

        </div>
    <div class="col-xs-6">
             <h4>Some really large label that will wrap to multiple lines in small screens</h4>

        </div>
        <div class="col-xs-2">
            <button class="btn" style="color: #660066;"> <i class="fa fa-arrow-left" data-ng-click="onClickBack()"></i>

            </button>
        </div><!-- 
     -->
    </div>
</div>

JS Fiddle Link:

所以我的问题是如何使箭头按钮对齐到行的中间。
我试过:display:table-cell 和 display: inline-block;似乎没有任何效果。我错过了什么吗？

Answer 1

借用此问题的不同案例和此链接中提到的源代码here .

---

检查我的工作 fiddle 是否也支持不同的媒体:here

---

HTML :

<div class="container">
  <div class="row">
    <div class="row-height">
      <div class="col-xs-4 col-height">
        <div class="inside">
          <div class="content">
            <h4>Some really large label that will wrap to multiple lines in small screens</h4>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-height col-middle">
        <div class="inside">
          <div class="content">
            <h4>Some really large label that will wrap to multiple lines in small screens</h4>
          </div>
        </div>
      </div>
      <div class="col-xs-2 col-height col-middle">
        <div class="inside">
          <div class="content">
            <button class="btn" style="color: #660066;"> <i class="fa fa-arrow-left" data-ng-click="onClickBack()"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

---

CSS:

  .inside {
  background: #ffffff;
}
.content {
  padding: 12px 3px;
}
.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}
@media (min-width: 480px) {
  .row-xs-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-xs-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-xs-top {
    vertical-align: top;
  }
  .col-xs-middle {
    vertical-align: middle;
  }
  .col-xs-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 768px) {
  .row-sm-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-sm-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-sm-top {
    vertical-align: top;
  }
  .col-sm-middle {
    vertical-align: middle;
  }
  .col-sm-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 992px) {
  .row-md-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-md-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-md-top {
    vertical-align: top;
  }
  .col-md-middle {
    vertical-align: middle;
  }
  .col-md-bottom {
    vertical-align: bottom;
  }
}
@media (min-width: 1200px) {
  .row-lg-height {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
  }
  .col-lg-height {
    display: table-cell;
    float: none;
    height: 100%;
  }
  .col-lg-top {
    vertical-align: top;
  }
  .col-lg-middle {
    vertical-align: middle;
  }
  .col-lg-bottom {
    vertical-align: bottom;
  }
}
body {
  padding-bottom: 40px;
}
h1 {
  margin: 40px 0px 20px 0px;
  color: #95c500;
  font-size: 28px;
  line-height: 34px;
  text-align: center;
}
[class*="col-"] {
  border: none;
  background: #ffffff;
}
html,
body {
  width: 100%;
  height: 100%;
}
html {
  display: table;
}
body {
  display: table-cell;
  vertical-align: top;
}