Search code examples
htmlcssbuttontexticons

I want to place an icon and a text in my html button. The icon should be on the upper side of the button (first row). The text on the bottom side

I want to place an Icon, and a text in my html button. The icon should be on the upper side of the button (first row). The text on the bottom side. Both should be aligned horizontally in the center. I tried a long but couldn't make it. This is my current code. I have the problem that I cannot fit the icon and text correctly into my button. Also the center alignment is not working.

enter image description here

  <button class="button_1"  @onclick="Read_Error_Log">
      <table>
         <tr><td class="button_row1"><RadzenIcon Icon="icon1" class=rzi-header /> </td></tr>
         <tr><td class="button_row2"> Error Log</td></tr>
      </table>
  </button>

css:

button_row1 {
align-content: center;
margin-top: 0px !important;
margin-bottom: 0px !important;
height: 45px !important;
}

button_row2 {
text-align: center;
margin-top: 0px !important;
margin-bottom: 0px !important;
height: 15px !important;
}

.rzi-header{
font-size:40px !important;
}

.button_1 {
min-width: 100px;
max-width: 100px;
height: 70px;
background-color: #ffffff;
border: 1px solid;
border-color: #aed6f1;
display: inline-block;
font-size: 13px;
border-radius: 5px 5px 5px 5px;
outline-color: ActiveBorder;
color: #212f3c;
padding-top: 4px;
align-content:center;
}

enter image description here

Solution

  • A simple example using flex box:

    .icon-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 12px;
}

.icon-button > * {
  flex: none;
}
    <button class="icon-button">
  <div class="icon">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" height="45" fill="#aaa">
      <circle cx="50" cy="50" r="50" />
    </svg>
  </div>
  <div class="label">Hello World</div>
</button>