CODEWITHSUNDEEP
htmlcss
Peter Firmansyah
Peter Firmansyah

Reputation: 1

How to center span link over an image

Actually owe to centering an span link over an image with css, I tried it but it fails when image has different size, also when it turn responsively

<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/

Thanks

Upvotes: 0

Views: 66

Answers (2)

Mukul Kant
Mukul Kant

Reputation: 7122

I hope it will helps you.

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

Upvotes: 0

Aaron
Aaron

Reputation: 10440

I've updated your fiddle with the correct code.

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

basically the key here is the 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>

Upvotes: 1

Related Questions