Question

TL＆安培; DR：我正在尝试确保我的左右图标与我已成功能够直接放置在屏幕中央的中心文本对齐。

如下所示：如果我放入几个单词或一个小片段，左右箭头看不到居中的div居中。

以下是我尝试失败的事情：

1）试图有问题地对文本进行计数并让它每次都写一个新的样式表。那只是发臭，听起来不对吗？至少在铁轨上的红宝石上，它无论如何都无法工作。 10级愚蠢的想法浪费了5个小时

2）我可能要求WELL中的所有TEXT都具有一定的长度，但是这会将特定要求与视图 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%);
}

Bootstrap Align ICON不与Text垂直居中

1 个答案: