利用css实现span背景图片做链接,且span在div里垂直居中

author Owner  •  Filed under templates, internet

    首先,利用图片做链接,图片可以直接用img标签,也可以通过设置span的backgroun:url(..);来实现图片显示问题。

将span置于a标签内,需要对span进行块级处理,可将span的display设置为inline-block;这样,图片才会显示,链接就实现了。


    然后,解决span如何在div中垂直居中显示,对于高度不确定的div来说,内部的span如果想垂直居中的话,可通过top和left调整span在div中的位置,通过width和height调整链接span的大小。

    

    垂直居中可以将span的top设置为50%,然后将margin-top设置为-height/2,即减去span一半的高度。


span{
 position:absolute; /*not essential*/
 top:50%;
 margin-top:-50px;
 left:??px;
 background:url(../../??.png) no-repeat;
 width:120px;
 height:100px;
 dispaly:inline-block;
}


Tagged: orci, lectus, varius, turpis

Comments (0)  • 2016-01-19 17:08:53 •  Edit

0 Responses

最新文章