Question

我想将项目（glyphicon，arrows css，imgs）放在我的文本左侧或右侧的引导表的TH元素中，并确保它们自动垂直放置在中间。

<div class="container">
    <br>
    <table class="table table-condensed table-hover table-striped table-bordered">
        <thead>
            <tr>
                <th></th>
                <th class="text-right">ID<span class="left-side glyphicon glyphicon-chevron-down"></span></th>
                <th>COD<span class="right-side glyphicon glyphicon-chevron-down"></span></th>
                <th class="text-right">ID<span class="left-side arrow-down"></span></th>
                <th>COD<span class="right-side arrow-down"></span></th>
            </tr>
        </thead>
    </table>
</div>

如果给出一个top值可以很好地用于箭头元素但是没有用于项目glyphicon。

table {
  table-layout: fixed;
}
th {
  position: relative;
  white-space: nowrap;
}
th > .left-side,
th > .right-side {
  display: block;
  position: absolute;
  top: 43%; <-- Ok for arrow but not for glyphicon
}
th > .left-side {
  left: 5px;
}
th > .right-side {
  right: 5px;
}
.arrow-up {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: -2px;
  vertical-align: middle;
  border-bottom: 6px dashed;
  border-bottom: 6px solid \9;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}
.arrow-down {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: -2px;
  vertical-align: middle;
  border-top: 6px dashed;
  border-top: 6px solid \9;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
 }

bootply

有没有办法垂直对齐任何高度的元素，能够放置在文本的右侧或左侧？

Answer 1

而不是top:43%使用以下内容：

top: 50%;  /*moves the arrow down 50%*/
transform: translateY(-50%); /*moves it back up half its height*/

Updated bootlply

CSS垂直中间和拉高/未知高度的左/右元素

1 个答案: