Styling icon and text inside a button and centering it

On top is what I want, on bottom is what it currently looks like

I tried tables and divs and everything, but I cant seem to get them to center the icon and text on the button.

This is my 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>

And my 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;
}

Any CSS gurus who can help?



I don’t find any issue on your code and its working fine it seems. Check below snippet.

.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 target="_blank" rel="nofollow" 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>

If this is not the problem you are looking for then share a fiddler to find what is the issue!

Try to use this…It can help you:

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

Try doing this and tell me what happens?

Please try this streamlined solution:

  1. Remove the <div style=”text-align:center”> ;
  2. Remove (now) useless <br> between image and text ;
  3. Add those lines to .head-button-size rule using flexbox as written below :

CSS code

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

This should center the content of your button both vertically and horizontally. Then adjust the look by adding properties you want like margin, padding or by playing with the Flexbox properties. Nice doc available here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/