Whats the best way to vertically align SVG with buttons?

Question

How would I vertically align these SVG images to vertically match the buttons I'm making?

<button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 1<br>
.</button> <svg height="50" viewbox="0 0 512 512" width="50" xmlns=
"http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path></svg> <button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step Two<br>
.</button> <svg height="50" viewbox="0 0 512 512" width="50" xmlns=
"http://www.w3.org/2000/svg">
<path d=
"M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
</path></svg> <button style=
"width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
Step 3<br>
.</button>

jsfiddle

Answer 1

UPDATED 7 May 2018

• added display: flex option

---

You can style both button and svg like this:

button,
svg {
  display: inline-block;
  vertical-align: middle;
}

button,
svg {
  display: inline-block;
  vertical-align: middle;
}

<h2>Using display inline block and vertical align middle</h2>

<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
    Step 1<br>.
</button>

<svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
    <path d=
    "M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
    </path>
</svg>

<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
    Step Two<br>.
</button>

<svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
    <path d=
    "M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
    </path>
</svg>

<button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
    Step 3<br>.
</button>

Hope this helps.

---

Display Flex

You can also achieve this by using display: flex for browser that is supported. But need an extra wrapper for the buttons and the svg.

@supports (display: flex) {
  .steps {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

<h2>Using display flex</h2>
<div class="steps">
  <button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
      Step 1<br>.
  </button>

  <svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
      <path d=
      "M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
      </path>
  </svg>

  <button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
      Step Two<br>.
  </button>

  <svg height="50" viewbox="0 0 512 512" width="50" xmlns="http://www.w3.org/2000/svg">
      <path d=
      "M 64.00,416.00l 96.00,96.00l 256.00-256.00L 160.00,0.00L 64.00,96.00l 160.00,160.00L 64.00,416.00z">
      </path>
  </svg>

  <button style="width:100px;height:100px;border-radius:50%;background-color:white;border-color:#0F75BC;">
      Step 3<br>.
  </button>
</div>