html – 元素内的文本位置

前端之家收集整理的这篇文章主要介绍了html – 元素内的文本位置前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我目前的代码

HTML

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

CSS:

  1. .button {
  2. background:url('../images/btn_bg.jpg') repeat scroll 0% 0%;
  3. font: 12px Helvetica,Arial,sans-serif;
  4. color: #FFF;
  5. text-shadow: 2px 2px 3px rgba(0,0.2);
  6. text-transform: uppercase;
  7. text-align: center;
  8. text-decoration: none;
  9.  
  10. cursor: pointer;
  11. border: none;
  12.  
  13. min-width: 87px;
  14. min-height: 29px;
  15.  
  16. float: right;
  17. margin-top: 14px;
  18.  
  19. padding-top: 4.25px;
  20.  
  21. transition: all 0.5s ease 0s;
  22. -webkit-transition: all 0.5s ease 0s;
  23. -moz-transition: all 0.5s ease 0s;
  24. -o-transition: all 0.5s ease 0s;
  25. }
  26.  
  27. .button:hover {
  28. background: url('../images/btn_over.jpg') repeat scroll 0% 0%;
  29. }

结果:

首先,这个全部包含的列有一个margin-bottom:14px.这将创建与列之间的间距以及列下方的两条水平线.如果用户想要将按钮全部放在一起,则情况就是如此,列中的文本仍将与下面的两行相差14px.

正如您所看到的那样,.button的文本通过使用css padding属性和text-align:center与中间对齐.
按钮上有一个margin-top:14px,它在按钮上方的间距与它下面相同.

但是,我发现通过使用填充元素作为按钮内部的文本,它会影响它周围的距离(在这种情况下,按钮下面的空间意味着14px,现在比它应该更大)是).

题:

有没有办法在不使用padding属性的情况下垂直对齐.button中的文本,因为我尝试了vertical-align,position,float和其他一些但是如果不改变框上方或下方的空间就没有成功…什么是最好的方法,如果可能的话,另一种方法是使用图像代替?

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

解决方法

有两种方法可以做到这一点,但是没有javascript,这两种方法都需要绝对高度,尽管第二个选项相对于你设置的填充有效.

>首先,一个明显的选择是使用线高.

这可以通过将文本行的高度设置为值来实现,并且因为文本已经本身垂直对齐到行高的中心,所以您可以获得所需的效果.

添加线高:27px; to .button {会给你你想要的结果.

jsfiddle

>第二种方法是将文本包含在span标记中的元素内,并将bottom属性设置为bottom:-6.75px;

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

< a class =“button”href =“#”>< span id =“buttontext”>阅读更多< / span>< / a>

你会把这行添加到你的CSS:

#buttontext {position:relative;底部:-6.75px;}

jsfiddle

参考

> line-height
> bottom

猜你在找的HTML相关文章