在自定义引导按钮中将文本与图标字体对齐
[英]Align text with icon font in custom bootstrap button
问题描述
我正在尝试将一些文本与具有自定义高度的按钮中的图标字体图标对齐。 图标和文本都应位于按钮的垂直中心，左右两侧分别填充一些像素，以便它们都位于按钮的水平中心。 似乎设置图标大小的属性也不起作用。
/* 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上找到我的代码。
编辑
我修复了所有问题，除了图标和文本不在按钮垂直中心这一事实。
柱塞也已更新。
编辑2：
通过使用@MarcosPérezGude想法解决了该问题
#left, #middle, #right{
height: 26px;
padding-top: 1px;
padding-bottom: 0px;
}
除了@iyyappan的部分解决方案答案
.material-icons {vertical-align: middle;}
5 个解决方案
解决方案1
4 已采纳 2016-02-29 12:43:36
我检查了您的代码。
请尝试一下。
#left, #middle, #right {
height: auto;
}
.material-icons {vertical-align: middle;}
解决方案2
0 2016-02-29 12:48:57
请添加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;
}
解决方案3
0 2016-02-29 12:52:31
尝试这样做可能会帮助您，并且要更改图标的大小，请使用font-size
#left, #middle, #right
{
height:26px;
}
.material-icons
{
vertical-align: middle;
font-size:13px;
}
.btn
{
padding:2px 12px;
}
解决方案4
0 2016-02-29 12:55:50
.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>
解决方案5
0 2016-02-29 12:56:46
只需从自定义css文件style.css中删除以下代码即可，以免出现高度不正确的问题。
#left, #middle, #right { /* height: 26px; */ }
您的自定义CSS高度将覆盖默认引导程序按钮的高度
注意：由于您看不到中间的内容，所以（实际上是中间的）。
带有图标和文本的Bootstrap <a>标签按钮垂直对齐中间
[英]Bootstrap <a> tag button with Icon and Text vertically align middle
如何在Bootstrap 4中将Font-Awesome图标居中对齐与一行文本？
[英]How to vertically align center a Font-Awesome icon with a line of text in Bootstrap 4?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.