1

我有一个 200px x 100px 的图像，它充当链接的背景图像。悬停时，背景图像会发生变化。

在此处输入图像描述

在这里小提琴：http: //jsfiddle.net/EnsFK/

从图片可以看出，文字与图片没有对齐，出现在底部。有没有办法对齐文本，使其位于中间（与小点对齐？）我尝试了垂直对齐和行高，但无济于事。

.current-location {
    line-height: 24px;
    background-size: 48px 24px;
    height: 24px;
    width: 24px;
    text-decoration: none;
    position: relative;
    line-height: 24px;
    vertical-align: middle;
}

.current-location span {
    background: url(images/mobile/current-location.gif) left top no-repeat;
    display: inline-block;
    background-position: 0px 0px;
    background-size: 48px 24px;
    height: 24px;
    width: 24px;
    margin-right: 10px;
}

.current-location:hover span {
    display: inline-block;
    background-position: -24px 0px;
    background-size: 48px 24px;
    height: 24px;
    width: 24px;
}
4

5 回答 5

4

您可以使用pseudo elements.

像这样的东西：

.current-location:before {
   content: '';
   /* image here */
   margin-right: x px; /* however much you need */
   vertical-align: middle;
}

小提琴

标记：

<a href="#" class="current-location">Use this location</a>

CSS

.current-location {
       line-height: 24px;
       background-size: 48px 24px;
       height: 24px;
       width: 24px;
       text-decoration: none;
       position: relative;
     }
     .current-location:before {
         content: '';
          background: url(http://i39.tinypic.com/2lk5lci.png) left top no-repeat;
          display: inline-block;
          background-position: 0px 0px;
          background-size: 48px 24px;
          height: 24px;
          width: 24px;
          margin-right: 10px;
          vertical-align: middle;
      }
     .current-location:hover:before {
          background-position: -24px 0px;         
      }
于 2013-08-25T12:15:04.947 回答
1

您可以更改line-height文本以适合图像的位置，也可以使用background-position图像位置的属性以使其适合文本。

工作 jsFiddle - 还删除了一些不必要的代码。

.current-location {
    line-height: 24px;
    height: 24px;
    text-decoration: none;
    position: relative;
    line-height: 26px;
    display:inline-block;   
}

.current-location span {
    background: url(http://i39.tinypic.com/2lk5lci.png) left top no-repeat;
    display: inline-block;
    background-position: 0px 0px;
    background-size: 48px 24px;
    height: 24px;
    width: 24px;
    margin-right: 10px;
    vertical-align:top;
}

.current-location:hover span {
    background-position: -24px 0px;
}

注意：这通常是在没有<span>元素在锚本身上使用背景的情况下完成的。但是，您的方法将与新的 CSS 一样正常工作..

于 2013-08-25T11:59:32.203 回答
0

没有图像且没有额外标记的版本怎么样？http://jsfiddle.net/6aaZX/

对于这个 HTML：

<a href="#">Use this location</a>

这个CSS：

a {
    display: inline-block;
    color: #333;
    text-decoration: none;
    font-family: sans-serif;
    padding-left: 4em;
    line-height: 2;
}

a:before {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
     border-radius: 50%;
    background: #81B995;
    content: '';
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border: 0.4em solid #B7E2C8;
    margin-right: 1em;
    vertical-align: -0.3em;
}

它需要对边界半径的支持，但仅此而已 - 没有什么特别的。如果您确实需要使用图像，则可以按照 Danield 的建议将其应用于 :before 伪元素

于 2013-08-25T14:16:21.813 回答
0

我喜欢使用这个 css 片段进行垂直居中

#text{
   position:absolute; 
   top:50%; 
   height:240px; 
   margin-top:-120px; /* negative half of the height */
}
#container {
   position: relative; 
   height: 400px; 
}

<div id="container">
 <div id="text"><span>Text.....</span></div>
</div>
于 2013-08-25T11:59:35.760 回答
0

您的链接正确对齐请查看您的图片

background: url(images/mobile/current-location.gif) left top no-repeat;

如果你想让它居中对齐，你应该考虑做......

background: url(images/mobile/current-location.gif) center center no-repeat;

还要给出图像的真实宽度和高度以使此方法起作用。

display: inline-block;

ie6有问题，你需要使用：

display:inline-block;
*zoom: 1;
*display: inline;

尽量远离垂直对齐。

于 2013-08-25T12:11:13.077 回答