0

I created a button that use svg image icon on left and text on the right, but I could not make a text to center in the middle alignment as an icon.

Here how it looks:

enter image description here

It seems the text "Authorize" is align to the top not equally center in the middle relatively with icon.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button class="btn btn-success"><img src="images/edit_icon.svg" alt=""> Authorize</button>

I have tried to wrap text "Authorize" in <span class="btn-text"></span> and set padding-top and margin-top as well but does not work.

How can I align text align text well with icon perfectly in case? Thanks

Houy Narun
  • 1,557
  • 5
  • 37
  • 86

1 Answers1

2

Use flex-box that's fix your problem.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button class="btn btn-success d-flex align-items-center"><img src="images/edit_icon.svg" alt=""> Authorize</button>
batgerel.e
  • 837
  • 1
  • 10
  • 31