最上面是我想要的,最下面是当前的外观
我尝试了表格和divs以及其他所有内容,但似乎无法让它们将按钮和图标居中。
这是我的HTML
<table><tr>
<td style="height:66px;">
<button class="head-button-size blue-bg" ui-sref="start">
<div style="text-align:center">
<md-icon class="material-icons head-material">domain</md-icon><br>
<span class="head-mini-text">PROPERTY</span>
</div>
</button>
</td>
</tr></table>
还有我的CSS
.head-button-size {
height: 66px;
width: 62px;
}
.head-material {
color:#FFFFFF;
font-size:50px;
}
.head-mini-text {
color: #fff;
font-family: 'Arial Narrow', 'Helvetica Neue', 'Arial';
font-size:12px;
}
任何CSS专家都可以提供帮助吗?
最佳答案
我在您的代码上没有发现任何问题,而且看起来工作正常。检查以下代码段。
.blue-bg {
background-color: blue;
}
.head-button-size {
height: 66px;
width: 100px;
border-radius: 10px;
}
.head-material {
color: #FFFFFF;
font-size: 50px;
}
.head-mini-text {
color: #fff;
font-family: 'Arial Narrow', 'Helvetica Neue', 'Arial';
font-size: 12px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<table>
<tr>
<td style="height:66px;">
<button class="head-button-size blue-bg" ui-sref="start">
<div style="text-align:center">
<md-icon class="material-icons head-material">domain</md-icon>
<br>
<span class="head-mini-text">PROPERTY</span>
</div>
</button>
</td>
<td style="height:66px;">
<button class="head-button-size blue-bg" ui-sref="start">
<div style="text-align:center">
<md-icon class="material-icons head-material">domain</md-icon>
<br>
<span class="head-mini-text">PROPERTY</span>
</div>
</button>
</td>
<td style="height:66px;">
<button class="head-button-size blue-bg" ui-sref="start">
<div style="text-align:center">
<md-icon class="material-icons head-material">domain</md-icon>
<br>
<span class="head-mini-text">PROPERTY</span>
</div>
</button>
</td>
</tr>
</table>
如果这不是您要查找的问题,请共享一个提琴手来查找问题所在!
关于html - 样式化按钮内的图标和文本并将其居中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45965495/