Question

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

enter image description here

从图像中可以看出，文本未与图像对齐并显示在底部。有没有办法对齐文本，使它在中间（与小点对齐？）我尝试了垂直对齐和行高但无济于事。

.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;
}

Answer 1

您可以使用pseudo elements而不是在标记中使用空白。

这样的事情：

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

<强> FIDDLE

标记：

<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;         
      }

Answer 2

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

Working 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一样好。

Answer 3

我喜欢将此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>

Answer 4

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

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;

尝试远离垂直对齐。

Answer 5

没有图像且没有额外标记的版本怎么样？ 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;
}

它需要支持border-radius，但就是这样 - 否则没什么特别的。如果您确实需要使用图像，则可以将其应用于：之前的伪元素，如Danield建议的那样

背景图像内联文本

5 个答案:

标记：

CSS