Horizontally align CSS arrow and text

Question

I've got some text and a CSS arrow inside a button, but I can't horizontally align them - the arrow is below the text:

I've tried adding vertical-align: middle; to .down-arrow but it doesn't horizontally align them. I've also tried adding display: flex; align-items: center; display: flex; align-items: center; to the button but to no avail.

 .down-arrow { transform: rotate(45deg); border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; margin-left: 7px; }

 <button>Text<span class="down-arrow"></span></button>

JsFiddle: https://jsfiddle.net/1L3odx6s/

Answer 1

There are multiple ways you can achieve this easily.

One way to do this use vertical-align

Using vertical-align

 .down-arrow { transform: rotate(45deg); border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; margin-left: 7px; vertical-align: 2px; }

 <button>Text<span class="down-arrow"></span></button>

Flex technique

The other way is use flex on your button and use margin-top: 3px

Using flex and margin-top

You can read more about using flex boxes and easy recemended techniques here

 .down-arrow { transform: rotate(45deg); border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; margin-left: 7px; margin-top: 2px; } button { display: flex; }

 <button>Text<span class="down-arrow"></span></button>

Using align-items

 .down-arrow { transform: rotate(45deg); border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; margin-left: 7px; } button { display: flex; align-items: center; }

 <button>Text<span class="down-arrow"></span></button>

Answer 2

Do the transformation differently and you can use vertical-align:middle

 .down-arrow { transform: translateY(25%) rotate(-45deg); transform-origin: top left; border: solid black; border-width: 0 0 1px 1px; display: inline-block; vertical-align: middle; padding: 3px; margin-left: 5px; margin-right:2px; }

 <button>Text<span class="down-arrow"></span></button> <button style="font-size:30px">Text<span class="down-arrow"></span></button> <button style="font-size:50px">Text<span class="down-arrow"></span></button> <button style="font-size:50px">Text<span class="down-arrow" style="padding:5px;border-width: 0 0 2px 2px;"></span></button> <button style="font-size:50px">Text<span class="down-arrow" style="padding:8px"></span></button>

Or a custom value for vertical-align

 .down-arrow { transform: rotate(45deg); border: solid black; border-width: 0 1px 1px 0; display: inline-block; padding: 3px; margin-left: 7px; vertical-align: 0.2em; }

 <button>Text<span class="down-arrow"></span></button> <button style="font-size:30px">Text<span class="down-arrow"></span></button> <button style="font-size:50px">Text<span class="down-arrow"></span></button> <button style="font-size:50px">Text<span class="down-arrow" style="padding:5px;border-width: 0 2px 2px 0;"></span></button> <button style="font-size:50px">Text<span class="down-arrow" style="padding:8px"></span></button>