0

How do I vertically align HTML buttons when the content is mixed?

I can align them if they all have images or if they all have text, but the problem arises when trying to align a button with text to a button with an image.

button {
  border: 0;
  background: grey;
  height: 20px;
}
<button>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-square-fill" viewBox="0 0 16 16">
  <path d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"/>
</svg>
</button>
<button>
Action
</button>
gmcerveny
  • 191
  • 1
  • 17

1 Answers1

1

Use vertical-align: middle to align inline-block elements. Example:

button {
  border: 0;
  background: grey;
  height: 20px;
  vertical-align: middle;
}
<button>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-square-fill" viewBox="0 0 16 16">
  <path d="M2 16a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2zm6.5-4.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 1 0z"/>
</svg>
</button>
<button>
Action
</button>
pretzelhammer
  • 13,874
  • 15
  • 47
  • 98