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中提到的源代码。

检查我的工作小提琴是否也支持不同的媒体：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;
}

Answer 2

working JS Fiddle:

CSS更改：

.col-xs-2, .col-xs-6 {
   display: inline-block;
}
.vcenter {
     float:none;
    display:inline-block;
    vertical-align:middle;
    margin-right:-4px;
}

列中间的垂直对齐按钮 - 引导程序

2 个答案: