CODEWITHSUNDEEP
htmlcssbootstrap-5
james_clarkie
james_clarkie

Reputation: 23

How can I vertically align svg within button - bootstrap 5

How can I vertically align the svg within the button? I'm using bootstrap to style.

<a href="#home" class="navbar-home">
    <button type="button" class="btn btn-outline-warning">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"></path>
        <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"></path>
        </svg>
   Home
   </button>
</a>

Upvotes: 1

Views: 673

Answers (1)

Ferri Adi Prasetya
Ferri Adi Prasetya

Reputation: 339

You can make the wrapper of the svg to flex and give align items center to center vertically and justify content center to center horizontally, you can read more on the Bootstrap Documentation. Here is the example for your case

<a href="#home" class="navbar-home">
    <button type="button" class="btn btn-outline-warning d-flex align-items-center justify-content-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
        <path fill-rule="evenodd" d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293l6-6zm5-.793V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"></path>
        <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"></path>
        </svg>
   Home
   </button>
</a>

On that case, the wrapper of the svg is button tag, so you can add class to the button to centering the content inside the button.

Upvotes: 1

Related Questions