CODEWITHSUNDEEP
htmlcss
user2550042
user2550042

Reputation: 73

Simple CSS issue, styling the button size

I have a button that has only one letter in it. this is the HTML for it:

<button type="button" class="clicker">X</button>

I need to resize that button to make it smaller as much as I need, and also to keep that letter following the size of the button.

I have tried the following css andit resizes the button, but the text is not following. It is either at the bottom of the button or not visible at all.

.clicker {
float: right;
font-family:"Calibri",Arial,Sans Serif;
font-size:1.0em;
line-height: 30px;
color:red;
text-align: center;
wordwrap: center;
text-shadow:1px 1px 1px #FFFFFF;

width:  30.0px;
height: 25.0px;

}

Upvotes: 2

Views: 100

Answers (4)

bzupnick
bzupnick

Reputation: 2814

If you change to line-height: 20px; then it will center.

Upvotes: 0

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

It's just becuase of your line-height. Remove it and it works :)

Fiddle.

CSS:

.clicker {
    float: right;
    font-family:"Calibri", Arial, Sans Serif;
    font-size:1.0em;
    color:red;
    text-align: center;
    wordwrap: center;
    text-shadow:1px 1px 1px #FFFFFF;
    width: 30.0px;
    height: 25.0px;
}

Upvotes: 0

hjpotter92
hjpotter92

Reputation: 80639

I don't think you need font-size and line-height properties. Use vertical-align instead.

.clicker {
    font-family: "Calibri", Arial, Sans Serif;
    font-size: 1.0em;
    color:red;
    text-shadow: 1px 1px 1px #FFFFFF;
    width: 30px;
    height: 25px;
    vertical-align: middle;
}

Fiddle:- http://jsfiddle.net/7wCLu/

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

Reduce the line-height to 23px

http://jsfiddle.net/GfETQ/1/

Upvotes: 3

Related Questions