Written button on top of the other

Navigation
1

I have this button, I would like to add two words in it, but displaying one on top of the other, I already tried to use <br> between them but it is like creating another button, I would like a button with the proportions that are there , but that one text was on top and the other below, I do not handle much of css, would anyone know how to do? I would like to leave Finish on top and Buy under 

<button type="button" title="Finalizar Pedido" class="button btn-checkout btn-inline " 
        style="width: 93px; line-height: 50px; display: inline-block;"><span><span>Finalizar Compra</span></span></button>
    
asked by anonymous 04.09.2017 / 22:20

1 answer

1

In this case the problem is that you put line-height as 50px , so when you created a line break, the two lines were 50px in size, resulting in an element with 100px height ( 50px for each line).

To solve this, just work with padding instead of line-height . With padding you control the spacing between the borders and the content of the element.

Here's your changed example below: 

<button type="button" title="Finalizar Pedido" class="button btn-checkout btn-inline " 
        style="width: 93px; display: inline-block; padding: 10px 0 10px 0;"><span><span>Finalizar Compra</span></span></button>
    
04.09.2017 / 22:36
Error creating array of strings Is it possible to use the W3C validator for sites built in Angular.JS?