8

这是我当前的代码的样子：

HTML：

<a class="button" href="#">Read More</a>

CSS：

.button {
background:url('../images/btn_bg.jpg') repeat scroll 0% 0%;
font: 12px Helvetica, Arial, sans-serif;
color: #FFF;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
text-align: center;
text-decoration: none;

cursor: pointer;
border: none;

min-width: 87px;
min-height: 29px;

float: right;
margin-top: 14px;

padding-top: 4.25px;

transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}

.button:hover {
background: url('../images/btn_over.jpg') repeat scroll 0% 0%;
}

结果：

JPG 图片结果

首先，全部包含在其中的列有一个margin-bottom: 14px. 这将创建与列之间的间距及其下方的两条水平线。因此，如果用户想将按钮全部取出，列内的文本仍会与下面的两行相距 14px。

如您所见，使用 css属性和. 的文本.button与中间对齐。按钮上有一个，按钮上方和下方的间距相同。paddingtext-align: centermargin-top: 14px

但是，我发现通过使用padding按钮内的文本元素，它会影响它周围的距离（在这种情况下，按钮下方的空间应该是 14 像素，现在比它应该的大）。

问题：

有没有一种方法可以在不使用填充属性的情况下垂直对齐文本，.button因为我已经尝试了垂直对齐、位置、浮动和其他一些属性，但是如果不更改框上方或下方的空间就没有成功...什么是解决此问题的最佳方法，如果可能的话，另一种仅使用图像的方法？

任何帮助将不胜感激。http://jsfiddle.net/9xpfY/

4

4 回答 4

18

有两种方法可以做到这一点，但是如果没有 javascript，这两种方法都需要绝对高度，尽管第二个选项相对于padding您设置的值起作用。

  • 首先，一个明显的选择是使用行高。

    这通过将文本行的高度设置为一个值来工作，并且因为文本已经在本机垂直对齐到 line-height 的中心，您可以获得您正在寻找的效果。

    添加该行将line-height : 27px;为.button {您提供所需的结果。

    jsfiddle

  • 第二种方法是将元素内的文本包装在 span 标签中，并将bottom属性设置为bottom: -6.75px;

    你的按钮元素看起来像这样

    <a class="button" href="#"><span id="buttontext">Read More</span></a>

    您可以将此行添加到您的 css 中：

    #buttontext {position: relative; bottom: -6.75px;}

    jsfiddle

参考

于 2012-05-09T23:43:31.433 回答
3

您想使用“line-height”样式来指定里面文本的行高。请记住，在某些情况下，这也可能会改变元素的高度（例如，当 line-height 大于 element 的 min-height 时）。看到这个：http: //jsfiddle.net/VvnhJ/

于 2012-05-09T23:30:21.193 回答
1

设置line-height为与按钮相同的值height

于 2012-05-09T23:31:28.003 回答
1

我认为您可以做的一件事是使用 line-height 属性。试试这个：

.button{
  line-height : 27px;
}
于 2012-05-09T23:36:14.450 回答