CODEWITHSUNDEEP
htmlcss
Kyrbi
Kyrbi

Reputation: 2250

Button's text vertical align

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 :)

enter image description here

Upvotes: 30

Views: 114482

Answers (5)

Ankur Gupta
Ankur Gupta

Reputation: 41

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>

Upvotes: -1

Pensierinmusica
Pensierinmusica

Reputation: 6940

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

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

Upvotes: 22

npage
npage

Reputation: 1288

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/

Upvotes: 30

Marc Audet
Marc Audet

Reputation: 46785

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/

Upvotes: 2

Sachin
Sachin

Reputation: 40970

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

Upvotes: 10

Related Questions