我讀了很多關于如何在按鈕內居中對齊圖標的帖子，但它們都不適合我的情況，因為在我的情況下，按鈕位于導航欄內。請參閱jsfiddle中的代碼，也粘貼在下面的代碼塊中。 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="navbar-fixed"> <nav class="teal"> <div class="container"> <div class="nav-wrapper"> <a href="#" class="brand-logo">LOGO </a> <ul class="right hide-on-med-and-down"> <li> <form class="orange" style=""> <div style="display: inline-flex; border: 1px black solid; align-items: center;"> <input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;"> <button class="btn" type="submit" style="background: blue; height:45px;"> <i class="material-icons" style="border: 1px red solid; display: inline; margin: auto;">search</i> </button> </div> </form> </li> <li> <a href="#home">Home</a> </li> </ul> </div> </div> </nav> </div>問題是，搜索圖標沒有在 BUTTON 內垂直居中，我嘗試了很多建議的方法，但沒有奏效。
4 回答
慕斯709654
TA貢獻1840條經驗 獲得超5個贊
如果你的導航欄有固定的高度，這個CSS對你來說就足夠了https://jsfiddle.net/fw9cmaq6/
.material-icons{
margin-top:-8px;
}
如果沒有固定高度就用這個
.material-icons{
display: table-cell !important;
vertical-align: middle;
line-height:0 !important;
height:100% !important;
}
慕桂英3389331
TA貢獻2036條經驗 獲得超8個贊
您只需添加line-height: 45px到您的按鈕中icon，因為您已將 按鈕 添加height:45px;到按鈕中，就像這樣：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="navbar-fixed">
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">LOGO </a>
<ul class="right hide-on-med-and-down">
<li>
<form class="orange" style="">
<div style="display: inline-flex; border: 1px black solid; align-items: center;">
<input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;">
<button class="btn" type="submit" style="background: blue; height:45px;">
<i class="material-icons" style="border: 1px red solid; display: inline; margin: auto;line-height:45px;">search</i>
</button>
</div>
</form>
</li>
<li>
<a href="#home">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
嚕嚕噠
TA貢獻1784條經驗 獲得超7個贊
您可以檢查一下（全屏查看）
#container {
height: 65px;
display: flex;
}
#search-bar {
height: 100%;
}
button.btn {
height: auto !important;
}
.material-icons {
vertical-align: middle;
justify-content: center;
align-items: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="navbar-fixed">
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">LOGO </a>
<ul class="right hide-on-med-and-down">
<li>
<form class="orange">
<div id="container">
<input id="search-bar" type="search" placeholder="text text...">
<button class="btn" type="submit" style="background: blue; height:45px;">
<i class="material-icons">search</i>
</button>
</div>
</form>
</li>
<li>
<a href="#home">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
GCT1015
TA貢獻1827條經驗 獲得超4個贊
您可以通過調整代碼中搜索 div 的邊距來修復它。希望這可以幫助。我已經在你的代碼中修復了它。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="navbar-fixed">
<nav class="teal">
<div class="container">
<div class="nav-wrapper">
<a href="#" class="brand-logo">LOGO </a>
<ul class="right hide-on-med-and-down">
<li>
<form class="orange" style="">
<div style="display: inline-flex; border: 1px black solid; align-items: center;">
<input id="search-bar" type="search" placeholder="text text..." style="border: 1px red solid; margin: 0; height: 100%;">
<button class="btn" type="submit" style="background: blue; height:45px;">
<div style="margin-top: -9px;">
<i class="material-icons" style="border: 1px red solid; display: inline; ">search</i>
</div>
</button>
</div>
</form>
</li>
<li>
<a href="#home">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
- 4 回答
- 0 關注
- 203 瀏覽
添加回答
舉報
0/150
提交
取消