Align text with icon font in custom bootstrap button

Question

Align text with icon font in custom bootstrap button

Joh*_*zle 0 html css twitter-bootstrap material-design

I´m trying to align some text with an icon-font icon in a button with custom height. The icon and the text should both be in the vertical center of the button with some pixels padding to the left and right side so that they both are in the horizontal center of the button. It also seems that the attribute which sets the size of the icon also doesn´t work.

/* 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 */
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

You can also find my code on Plunker.

EDIT

I fixed all issues besides the the fact that icon and text aren't in the vertical center of the button.

The Plunker was also updated.

EDIT 2:

The problem was fixed by using @MarcosPérezGude idea

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

Run Code Online (Sandbox Code Playgroud)

in addition to @iyyappan answer with the partial solution

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

我检查了你的代码。

请尝试一下。

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，10 月前
查看次数：	1912 次
最近记录：	9 年，10 月前