CODEWITHSUNDEEP
htmlcss
stcho
stcho

Reputation: 2159

How to resize button without cutting the text inside

I am trying to style my button however when I try to resize it via height or width attributes it keeps cutting the text inside. I tried using paddings as well but I am having no luck.

Here are some pictures for my problem

enter image description here

I want the height of the blue area to be smaller and the "x" centered within the square.

enter image description here

css code for above is 

.delete {
 cursor: pointer !important;
 font-size: 42px;
 position: absolute;
 color: gray;   
 height: 50px;
}

enter image description here

css code for this one is 

.delete {
 cursor: pointer !important;
 font-size: 42px;
 position: absolute;
 color: gray;   
 height: 30px;
}

How do I style the button to get it to move the "x" text up the way I want?

Here is my html

<button type="button" class="delete" ng-click="deleteModel(model)">
      <span>&times;</span>
      <span class="sr-only">Delete</span>
</button>

Upvotes: 2

Views: 2747

Answers (3)

onlycode
onlycode

Reputation: 13

try out this css:

.delete {
cursor: pointer !important;
position: absolute;
color: gray;   
height: 36px;
}
.delete span{
font-size:28px;
}

It might help you!!!

Upvotes: 1

levi
levi

Reputation: 22707

Here, you need to reduce the size of the font, because that is a character not an image.

try with:

 font-size: 25px;

http://jsfiddle.net/3Yq8P/

Upvotes: 0

Joe
Joe

Reputation: 519

Try using line-height

line-height:25px;

You may need to play around with the value. 25px looks good with your code.

http://jsfiddle.net/686s8/

Upvotes: 3

Related Questions