CODEWITHSUNDEEP
csstwitter-bootstrapsvg
Rugo
Rugo

Reputation: 383

Center svg icon inside button

I'm currently facing the problem, that the icon inside my button won't center vertically. Somehow the svg also seems to be sticking outside of the span surrounding it. How can I fix this? This is my code:

<button class="btn btn-block btn-secondary dropdown-toggle" type="button"
 id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      XS
      <div class="select-arrow-icon">
           {% sw_icon 'arrow-down' %}
      </div>
</button>

enter image description here

Upvotes: 4

Views: 4704

Answers (1)

jgphilpott
jgphilpott

Reputation: 649

I would try using the CSS flex property.

Add this style to the parent div element:

#dropdownMenuButton {
  display: flex;
  align-items: center;
}

Upvotes: 3

Related Questions