css - Bootstrap Align ICON 不与文本垂直居中

Question

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

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

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

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

2) 我可以要求 WELL 中的所有 TEXT 都具有一定的长度，但那样会把特定的要求与 View 相结合 Level 2 Stupid idea

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%);
}