Question

以下代码使用bootstrap glyphicons和50％边框半径来显示圆圈中的图标。但是，尽管设置了<div class="glyphicon-ring white-ring"> <span class="glyphicon glyphicon-chevron-down glyphicon-bordered" style="color:white"></span> </div>属性，但图标并不完全是中心（略微向左）。这是为什么？

   .glyphicon-ring {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      border: 6px solid #54534A;
      color: #54534A;
      display: inline-table;
      text-align: center;
      font-size: 40pt;
    }

CSS：

angular.module('MyApp', [])
.controller('MainController', [ '$scope', function($scope) {

  $scope.publication = {
    question: "Is it good ?",
    options: []
  };
  $scope.addItem = function() {

    $scope.publication.options.push($scope.inputQuestion);
  }
}]);

JSFiddle

Answer 1

你应该在span style＆amp;中添加line-height; div中的margin如下所示

.glyphicon-ring {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
border: 6px solid #54534A;
color: #54534A;
border-radius:50%;
text-align:center;
width: 90px;
height: 90px;
font-size:40pt;
}

span style是：

<div class="glyphicon-ring white-ring"> 
<span class="glyphicon glyphicon-chevron-down glyphicon-bordered" style="margin:0; line-height:77px; text-align: center;"></span>

Answer 2

在line-height: 90px;上使用.glyphicon：

.glyphicon{
    line-height: 90px;
    vertical-align: middle; /* To insure vertical align */
}

P.S。：由于图标宽度，图标仍然看起来略微偏向左侧。在这种情况下，您可以使用transform:translateX(2px);类中的.glyphicon来修复它。

Bootstrap Glyph从圆形边框稍微偏离中心

2 个答案: