如何在不剪切文本内部的情况下调整按钮大小

Question

我正在尝试设置按钮的样式，但是当我尝试通过高度或宽度属性调整其大小时，它会不断切割文本内部。我也试过使用填充物，但我没有运气。

以下是我的问题的一些照片

我希望蓝色区域的高度更小，并且＆＃34; x＆＃34;在广场中心。

上面的css代码是

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

这个的css代码是

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

如何设置按钮的样式以使其移动＆＃34; x＆＃34;按照我想要的方式发短信？

这是我的HTML

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

Answer 1

尝试使用line-height

line-height:25px;

您可能需要使用该值。 25px看起来很适合您的代码。

http://jsfiddle.net/686s8/

Answer 2

试试这个css：

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

它可能对你有帮助!!!

Answer 3

在这里，您需要减小字体的大小，因为这是一个字符而不是图像。

尝试：

 font-size: 25px; 

http://jsfiddle.net/3Yq8P/