樣式圖標和按鈕中的文本，並圍繞它

Question

在頂部是我想要的，在底部的是它目前看起來像

我想表和div的一切，但我似乎無法讓他們將按鈕上的圖標和文字居中。

這是我的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大師誰可以幫助？

Answer 1

我不覺得在你的代碼中的任何問題，它的做工精細，似乎。檢查下面的代碼段。

.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>

如果這不是你正在尋找的問題，那麼共享一個小提琴手發現什麼問題！

Answer 2

嘗試使用這個......它可以幫助你：

.head-material { 
color:#FFFFFF; 
margin-left:-20px; 
margin-top:-20px; //add this thing and adjust as you want 
font-size:50px; 
} 
.head-mini-text { 
color: #fff; 
margin-top:20px; //add this thing and adjust as you want 
font-family: 'Arial Narrow', 'Helvetica Neue', 'Arial'; 
font-size:12px; 
} 

嘗試這樣做的，告訴我發生了什麼？

Answer 3

請試試這個精​​簡的解決方案：

.my-button { 
 
    width:66px; 
 
    height:66px; 
 
    border:2px solid #154769; 
 
    border-radius:4px; 
 
    background-color:#18557d; 
 
    box-shadow: 3px 3px 3px #ccc; 
 
} 
 

 
.image { 
 
    width:30px; 
 
    height:30px; 
 
    display:block; 
 
    margin:10px auto 0px auto; 
 
} 
 

 
.text { 
 
    color:white; 
 
    margin: 10px auto 0px auto; 
 
    font-size:8pt; 
 
    text-align:center; 
 
    font-family:Arial; 
 
}

<div class="my-button"> 
 
    <img class="image" src="http://www.iconsdb.com/icons/preview/white/home-5-xxl.png"/> 
 
    <div class="text"> 
 
    PROPERTY 
 
    </div> 
 
</div>

Answer 4

1. 取出<div style="text-align:center">;
2. 刪除（現在）圖像和文字之間無用<br>;
3. 添加這些行.head-button-size規則使用Flexbox的下面寫着：

CSS代碼

.head-button-size { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 

這應該垂直和水平居中的按鈕的內容。然後調整加入你想要一個像margin，padding性質或通過與Flexbox的性能發揮的外觀。漂亮的文檔可在這裏：https://css-tricks.com/snippets/css/a-guide-to-flexbox/