Html CSS垂直中间和拉右/左元素，高度未知 我想把Bootstrap表的TH元素中的项目（GLPHICON，箭头CSS，IMGS）放在文本的左边或右边，并确保它们在中间垂直地自动定位。 <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值，则该值对于arrow元素非常有效，但对于item 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;
 }

表格{
表布局：固定；
}
th{
位置：相对位置；
空白：nowrap；
}
th>左侧，
th>。右侧{
显示：块；
位置：绝对位置；
顶部：43%；。左侧{
左：5px；
}
th>。右侧{
右：5px；
}
.向上箭头{
显示：内联块；
宽度：0；
身高：0；
左边距：-2px；
垂直对齐：中间对齐；
边框底部：6px虚线；
边框底部：6px实心\9；
右边框：3px实心透明；
左边框：3倍实心透明；
}
.向下箭头{
显示：内联块；
宽度：0；
身高：0；
左边距：-2px；
垂直对齐：中间对齐；
边框顶部：6px虚线；
边框顶部：6px实心\9；
右边框：3px实心透明；
左边框：3倍实心透明；
}

---

是否有任何方法可以垂直对齐任意高度的元素，使其能够放置在文本的右侧或左侧？

而不是

顶部：43%

使用以下方法：

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

---

太好了！非常感谢！