最上面是我想要的,最下面是当前的外观

html - 样式化按钮内的图标和文本并将其居中-LMLPHP

我尝试了表格和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/

10-12 01:05
查看更多