使背景图片居中链接

Question

我试图将背景图片链接居中，但我发现它在顶部对齐并且每个背景图片都是不同的尺寸，即使我指定了尺寸。

http://i.imgur.com/V5wNj0q.png

HTML

<section> 
    <h3>Contact</h3> 
    <ul id="contact"> 
     <li class="phone"><a href="tel:111-111-1111">111-111-1111</a></li> 
     <li class="mail"><a href="mailto:mail@mail.com">mail@mail.com</a></li> 
    </ul> 
    </section> 

CSS

#contact { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

#contact a { 
    display: block; 
    min-height: 30px; 
    background-repeat: no-repeat; 
    background-size: 30px 30px; 
    margin: 0 0 0 15px; 
    padding: 0 30px 0 30px; 
} 

.phone a { 
    background-image: url("../img/phone.jpg"); 
} 

.mail a { 
    background-image:url("../img/mail.jpg"); 
} 

Answer 1

你可以通过下面的代码片段解决这个问题，但你可以通过:after元素做到这一点。

.phone:after { 
    background-image: url('http://imgur.com/dU2eTo1.png'); 
    content: ''; 
    display: block; 
    width: 30px; 
    height: 30px; 
    position: absolute; 
    left: 0; 
    top: 50%; 
    transform: translateY(-50%); 
} 

代码片断

#contact { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#contact a { 
 
    display: block; 
 
    min-height: 30px; 
 
    background-repeat: no-repeat; 
 
    background-size: 30px 30px; 
 
    margin: 0 0 0 15px; 
 
    padding: 0 30px 0 40px; /* Altered */ 
 
    line-height: 30px; /* Added */ 
 
    background-position: left center; /* Added */ 
 
} 
 

 
.phone a { 
 
    background-image: url("http://imgur.com/dU2eTo1.png"); 
 
} 
 

 
.mail a { 
 
    background-image:url("http://imgur.com/dU2eTo1.png"); 
 
}

<section> 
 
    <h3>Contact</h3> 
 
    <ul id="contact"> 
 
     <li class="phone"><a href="tel:111-111-1111">111-111-1111</a></li> 
 
     <li class="mail"><a href="mailto:mail@mail.com">mail@mail.com</a></li> 
 
    </ul> 
 
    </section>

Answer 2

#contact { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#contact a { 
 
    display:block; 
 
    min-height: 30px; 
 
    background-repeat: no-repeat; 
 
    background-size: 30px 30px; 
 
    background-position : 0% 1%; 
 
    margin: 0 0 0 0; 
 
    padding-top:1%; 
 
    padding-left:30px; 
 
} 
 

 
.phone a { 
 
    background-image: url("http://cps.iith.ac.in/cpsiit/sites/all/sites/default/files/images/landline.png"); 
 
} 
 

 
.mail a { 
 
    background-image:url("http://icons.iconseeker.com/png/fullsize/sticker-pack-1/mail-54.png"); 
 
}

<section> 
 
    <h3>Contact</h3> 
 
    <ul id="contact"> 
 
     <li class="phone"><a href="tel:111-111-1111">111-111-1111</a></li> 
 
     <li class="mail"><a href="mailto:mail@mail.com">mail@mail.com</a></li> 
 
    </ul> 
 
    </section>