在圖像上的位置按鈕引導程序CSS

Question

我想將我的按鈕居中放置在垂直和水平方向上位於圖像上方。

我該如何做到這一點與代碼？ 演示：https://jsfiddle.net/bdec5ezo/

此外，一旦它到平板電腦和手機，我可以推我按鈕，所以它在左側，而不是居中？在.btn類

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
} 
 

 
img { 
 
    max-width:100% 
 
} 
 

 
.btn { 
 
    background: rgba(0,0,0,0); 
 
    border: 1px solid #ffca00; 
 
    border-radius: 0; 
 
    color: #ffca00; 
 
    display: block; 
 
    font-size: 18px; 
 
    margin: 0 auto; 
 
    padding: 10px 55px; 
 
    text-shadow: none; 
 
    transition: all .5s ease 0s; 
 
} 
 

 
.row { 
 
    position:relative 
 
} 
 

 
button { 
 
    position:absolute; 
 
    top:40%; 
 
    left:40% 
 
    
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
     <div class="row"> 
 
      <img src="https://placeholdit.imgix.net/~text?txtsize=141&txt=2073%C3%97563&w=2073&h=563"> 
 
      <a href="http://www.google.com"><button class="btn btn-default btn-yellow" type="submit">Shop Now</button></a> 
 
     </div> 
 
</div>

Answer 1

嘗試這個FIDDLE

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
} 
 

 
img { 
 
    max-width:100% 
 
} 
 

 
.btn { 
 
    background: rgba(0,0,0,0); 
 
    border: 1px solid #ffca00; 
 
    border-radius: 0; 
 
    color: #ffca00; 
 
    display: block; 
 
    font-size: 18px; 
 
    margin: 0 auto; 
 
    padding: 10px 55px; 
 
    text-shadow: none; 
 
    transition: all .5s ease 0s; 
 
    -ms-transform: rotate(90deg); /* IE 9 */ 
 
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(90deg); 
 
} 
 

 
.row { 
 
    position:relative 
 
} 
 

 
button { 
 
    position:absolute; 
 
    top:40%; 
 
    left:38% 
 
    
 
} 
 
@media (max-width:768px){ 
 
    button {left:0%} 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
     <div class="row"> 
 
      <img src="https://placeholdit.imgix.net/~text?txtsize=141&txt=2073%C3%97563&w=2073&h=563"> 
 
      <a href="http://www.google.com"><button class="btn btn-default btn-yellow" type="submit">Shop Now</button></a> 
 
     </div> 
 
</div>

Answer 2

刪除填充，然後就可以看到你的按鈕中心對於高度和寬度

有它在手機和平​​板電腦響應，你必須使用媒體查詢

Answer 3

已經有偉大的答案，但我在這裏有另一個版本，在任何種類的設備 我的做法的諾言精確的垂直對齊〜 但已修改多一點你的原代碼， 也許你可以有一看=） https://jsfiddle.net/Carr1005/qkzstpvv/1/

body { 
    margin: 10px; 
} 
.btn { 
    margin: 0 auto; 
    background: rgba(0,0,0,0); 
    border: 1px solid #ffca00; 
    border-radius: 0; 
    color: #ffca00; 
    display: block; 
    font-size: 18px; 
    padding: 10px 55px; 
    text-shadow: none; 
    transition: all .5s ease 0s; 
} 

.row { 
    position:relative; 
    background-image:url("https://placeholdit.imgix.net/~text?txtsize=141&txt=2073%C3%97563&w=2073&h=563"); 
    background-size:  cover; 
    background-repeat: no-repeat; 
    background-position: center center; 
    height:150px; /*need to adjust*/ 
} 

a { 
    display:block; 
    position:relative; 
    top:50%; 
    transform:translateY(-50%); 
    text-decoration:none; 
}