如何在图像上居中跨度链接

Question

实际上是因为使用css将图像上的跨度链接居中，我尝试了但是当图像具有不同的大小时它也会失败，同时它也会在响应时转动

<div class="banner-wrapper">
 <a href="#">
  <img src="http://s27.postimg.org/mqdco2gc3/megamenu1.png">
      <span class="thumb-btn">SHOP</span>
 </a>   
</div>

.banner-wrapper {
    width: auto;
    display: block;
    margin: 0 auto;
}
.banner-wrapper img {
    width: auto;
}
.banner-wrapper a {
    text-decoration: none;   
    color: white;
    width:100%;
    display: block;
}
.thumb-btn {
    position: absolute;
    left: 25%;
    bottom: 55%;
    border: 2px solid white;
    padding: 10px 55px;
}
.thumb-btn:hover {
    position: absolute;
    left: 25%;
    bottom: 55%;
    border: 2px solid #ee7178;
    padding: 10px 55px;
    background: #ee7178;
}

http://jsfiddle.net/jp0dgroz/

由于

Answer 1

我用正确的代码更新了你的小提琴。

http://jsfiddle.net/jp0dgroz/4/

这里的关键点基本上是transform: translate(-50%,-50%);

.banner-wrapper {
  width: auto;
  display: inline-block;
  margin: 0 auto;
  position: relative;
}
.banner-wrapper img {
  width: auto;
}
.banner-wrapper a {
  text-decoration: none;
  color: white;
  width: 100%;
  display: block;
}
.thumb-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid white;
  padding: 10px 55px;
}
.thumb-btn:hover {
  border: 2px solid #ee7178;
  background: #ee7178;
}

<div class="banner-wrapper">
  <a href="#">
    <img src="http://s27.postimg.org/mqdco2gc3/megamenu1.png">
    <span class="thumb-btn">SHOP</span>
  </a>
</div>

Answer 2

我希望它会对你有所帮助。

＆＃13;

＆＃13;

<style type="text/css">
	.banner-wrapper {
    width: auto;
    display: block;
    margin: 0 auto;
    /*float: left;*/
    position: relative;
}
.banner-wrapper img {
    max-width: 100%;
    margin: 0 auto;
    display: block;
}
.banner-wrapper a {
    text-decoration: none;   
    color: white;
    width:100%;
    display: block;
}
.thumb-btn {
    position: absolute;
    left: 0;
    bottom:0;
    top:0;
    right:0;
    margin:auto;
    border: 2px solid white;
    padding: 10px 0;
    height:18px;
    width:120px;
  text-align:center;
}
.thumb-btn:hover {

    border: 2px solid #ee7178;
    background: #ee7178;
}

＆＃13;

<div class="banner-wrapper">
 <a href="#">
  <img src="http://s27.postimg.org/mqdco2gc3/megamenu1.png">
      <span class="thumb-btn">SHOP</span>
 </a>   
</div>

＆＃13;

＆＃13;

＆＃13;