在图像上的位置按钮引导程序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; 
}