[英]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;}
我檢查了您的代碼。
請嘗試一下。
#left, #middle, #right {
height: auto;
}
.material-icons {vertical-align: middle;}
請添加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;
}
嘗試這樣做可能會幫助您,並且要更改圖標的大小,請使用font-size
#left, #middle, #right
{
height:26px;
}
.material-icons
{
vertical-align: middle;
font-size:13px;
}
.btn
{
padding:2px 12px;
}
.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>
只需從自定義css文件style.css中刪除以下代碼即可,以免出現高度不正確的問題。
#left, #middle, #right { /* height: 26px; */ }
您的自定義CSS高度將覆蓋默認引導程序按鈕的高度
注意:由於您看不到中間的內容,所以(實際上是中間的)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.