Question

我正在尝试将某些文字与带有自定义高度的按钮中的图标字体图标对齐。图标和文本都应位于按钮的垂直中心，并且一些像素填充到左侧和右侧，以便它们都位于按钮的水平中心。似乎设置图标大小的属性也不起作用。

/* Styles go here */
.btn-group{
  margin-top: 20px;
  margin-left: 20px;
}

#left, #middle, #right{
  height: 25px;
}

.button-content{
  
}

.button-icon{
  
}

.button-text{
  vertical-align:middle;
}

.button-text i{
  font-size: 12px; /* Change of icon-size doesn´t apply */
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>

  <body>
    
    <div class="btn-group">
      <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" id="left">
        <span class="buton-content">
          <span class="button-icon"><i class="material-icons">info</i></span>
          <span class="button-text">CONTENT</span>
        </span>
      </label>
      <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" id="middle">
        <span class="buton-content">
          <span class="button-icon"><i class="material-icons">info</i></span>
          <span class="button-text">CONTENT</span>
        </span>
      </label>
      <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" id="right">
        <span class="buton-content">
          <span class="button-icon"><i class="material-icons">info</i></span>
          <span class="button-text">CONTENT</span>
        </span>
      </label>
    </div>
    
  </body>

</html>

您还可以在Plunker上找到我的代码。

修改

除了图标和文字不在按钮的垂直中心这一事实外，我修复了所有问题。

Plunker也得到了更新。

编辑2：

使用 @MarcosPérezGude idea

解决了这个问题

#left, #middle, #right{
  height: 26px;
  padding-top: 1px;
  padding-bottom: 0px;      
}

除 @iyyappan 以及部分解决方案

之外

.material-icons {vertical-align: middle;}

Answer 1

我检查了你的代码。

请尝试。

#left, #middle, #right {
    height: auto;
}
.material-icons {vertical-align: middle;}

Answer 2

请将vertical-align: middle;添加到.material-icons课程。

 .material-icons {
    vertical-align: middle;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
        }

Answer 3

尝试这可以帮助您和更改图标大小使用font-size

#left, #middle, #right
{
height:26px;
}

.material-icons 
{
vertical-align: middle;
font-size:13px;
}

.btn
{
padding:2px 12px;
}

Answer 4



    .btn-group{
      margin-top: 20px;
      margin-left: 20px;
    }

    #left, #middle, #right{
      height: 25px;
    }

    .button-content{
      
    }

    .button-icon{
      
    }

    .button-text{
      vertical-align:middle;
    }

    .button-text i{
      font-size: 12px; /* Change of icon-size doesn´t apply */
    }
    #left, #middle, #right {
        height: auto;
    }
    .button-icon {
        display: inline-block;
        vertical-align: middle;
        line-height: 0;
    }
    	
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">











     <div class="btn-group">
          <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Left'" id="left">
            <span class="buton-content">
              <span class="button-icon"><i class="material-icons">info</i></span>
              <span class="button-text">CONTENT</span>
            </span>
          </label>
          <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Middle'" id="middle">
            <span class="buton-content">
              <span class="button-icon"><i class="material-icons">info</i></span>
              <span class="button-text">CONTENT</span>
            </span>
          </label>
          <label class="btn btn-success" ng-model="radioModel" uib-btn-radio="'Right'" id="right">
            <span class="buton-content">
              <span class="button-icon"><i class="material-icons">info</i></span>
              <span class="button-text">CONTENT</span>
            </span>
          </label>
        </div>

Answer 5

只需从您的自定义css文件style.css中删除以下代码即可发出不正确的高度问题。

#left, #middle, #right {
    /* height: 26px; */
}

您的自定义CSS高度会覆盖默认引导程序按钮的高度

注意：由于您无法在中间看到您的内容，但是（实际上是在中间）。

Button size in Bootstrap Reference Link

在自定义引导按钮中将文本与图标字体对齐

5 个答案: