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>

中心与背景图像的链接

2 个答案: