Button's text vertical align

Question

I have got tricky problem here. I'd like to vertical align my text inside a button

<button id="rock" onClick="choose(1)">Rock</button>

And here is my CSS

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button:active {
    font-size: 22px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

You can check it out here http://jsfiddle.net/kA8pp/ . I want to have the text on the bottom. Thank you very much!

EDIT: I can't explain it well so here is the picture of it :)

what do you mean by on the bottom, as in under the picture or just at the bottom of the picture? — npage, Mar 18 '13 at 21:40

score 28 · Answer 1 · edited Mar 20 '13 at 13:11

28

You can use line-height to achieve your goal.

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    line-height: 150px;
    overflow: visible;
}

http://jsfiddle.net/kA8pp/2/

edited Mar 20 '13 at 13:11

Valentin Flachsel

10,795
10
44
67

answered Mar 18 '13 at 21:42

npage

1,258
10
14

I will use padding-top:65px; as someone said it here. But thank you very much also. :) – Kyrbi Mar 18 '13 at 21:47
+1, Was about to write the same answer. @MíraKapičiak, Padding is a wrong way to solve this. This is the correct way. – Starx Mar 18 '13 at 21:48
cool. using line-height I can put text at bottom but how about vertically aligning it to the top? – MilkyTech May 08 '14 at 16:13
3

I'm here because I'm trying *not* to use line-height, which renders differently across browsers on many fonts. Turns out its not so easy.. – Yuji 'Tomita' Tomita Jun 03 '14 at 22:40

score 22 · Answer 2 · answered Jul 23 '16 at 14:49

22

You can use flexbox (check browser support, depending on your needs).

button {
  display: inline-flex;
  align-items: flex-end; 
}

answered Jul 23 '16 at 14:49

Pensierinmusica

6,404
9
40
58

yeah thanks this worked for me. the display part especially. – Jonathan Laliberte Jul 03 '17 at 23:30
Seems to be the only really flexible way to affect vertical alignment in a button. – certainlyakey Jul 25 '18 at 09:32
3

This is not reliable solution, as [buttons can't be flex elements](https://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-or-fieldset-elements) – RoelN Dec 10 '18 at 10:22

score 10 · Accepted Answer · answered Mar 18 '13 at 21:42

Try padding-top:65px; in button class

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    padding-top:65px;
}

JS Fiddle Demo

score 2 · Answer 4 · answered Mar 18 '13 at 21:59

Buttons Style Differently: A Variation on Styling

The <button> element behaves a bit differently from some other elements, say a <div>. If you set display: table-cell in a button, it does not affect the layout, so vertical-align will allow you to control the text position.

On the other hand, one could do the following:

<div class="button" id="rock" onClick="choose(1)">Rock</div>

and use the following CSS:

.button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 90px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    display: table-cell;
    vertical-align: bottom;
    text-align: center;
    padding-bottom: 10px;
}

In this case, you have some control by adjusting padding and height.

If you are binding a JavaScript action to the element, it does not really matter all that much what the tag is, div or button.

This approach may some advantages in particular situations.

If you apply the above CSS to a button tag, it will not work. Good to know.

http://jsfiddle.net/audetwebdesign/QSap8/

score -1 · Answer 5 · answered Mar 29 '17 at 11:23

This should work for you!

<pre>
.button{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: #444;
    width: 32px;
    padding: 2px;
    margin-left: 5px;
    background-color: #fdfdfd;
    border: 1px solid #cdcdcd;
    cursor: pointer;
}
</pre>

Button's text vertical align

5 Answers5

Linked