Bootstrap 对齐图标不与文本垂直居中

Question

TL& DR: 我试图确保我的左图标和右图标与中心文本对齐，我已经成功地将其直接放置在屏幕的中心。

正如您在下面看到的：如果我输入几个单词或一小段代码块，左右箭头看起来不会与居中 div.

居中

以下是我尝试失败的方法：

1) 尝试有问题地对文本进行计数，并让它每次都写一个新样式 sheet。那只是发臭而且听起来不对？无论如何，它至少在 ruby 和 rails 上不起作用。 10 级愚蠢的想法浪费了 5 个小时

2) 我可以要求 WELL 中的所有 TEXT 都具有一定的长度，但那样会把特定的要求与视图相结合 2 级愚蠢的想法

3) 到处找。如您所见，我能够使屏幕上的内容居中，现在是一般教程或网站无法教授的特定小麻烦。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-2  col-sm-2 col-md-2 col-lg-2">
            <div class="pull-left centered_left">
                <h1><span class="glyphicon glyphicon-menu-left "> </span> </h1>
            </div>
        </div>

        <div class="col-xs-8  col-sm-8  col-md-8 col-lg-8">
            <div class="centered well">
                <h1 class="crop"> My ICONS do not align with this text!</h1>
            </div>
        </div>
        <div class="col-xs-2  col-sm-2 col-md-2 col-lg-2 ">
            <div class="pull-right centered_right ">
                <h1> <span class="glyphicon glyphicon-menu-right "> </span>  </h1>
            </div>
        </div>
    </div>
</div>

mysyle.css

.centered {
 position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}


.centered_left {
 position: fixed;
  top: 49%;
  left: 0%;

}

.centered_right {
 position: fixed;
  top:49%;
  right: 0%;
}

h1.crop{
     word-wrap: break-word;
     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     -ms-hyphens: auto;
     -o-hyphens: auto;
     hyphens: auto;
}

@media(max-width: 480px) {
  h1 {
    font-size: 12pt;
  }
}

Answer 1

尝试将您的 .centered_left 和 .centered_right 规则更改为：

.centered_left {
 position: fixed;
 top: 50%;
 left: 1%;
 transform: translate(-50%, -50%);
}

.centered_right {
 position: fixed;
 top:50%;
 right: -1%;
 transform: translate(-50%, -50%);
}

Bootstrap 对齐图标不与文本垂直居中

Bootstrap Align ICON do not vertically center with Text

html

css

twitter-bootstrap-3