Reputation: 2159
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
I want the height of the blue area to be smaller and the "x" centered within the square.
css code for above is
.delete {
cursor: pointer !important;
font-size: 42px;
position: absolute;
color: gray;
height: 50px;
}
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>×</span>
<span class="sr-only">Delete</span>
</button>
Upvotes: 2
Views: 2747
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
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;
Upvotes: 0
Reputation: 519
Try using line-height
line-height:25px;
You may need to play around with the value. 25px looks good with your code.
Upvotes: 3