Question

我想将我的按钮垂直和水平放置在我的图像上。

如何使用代码执行此操作？ 演示： https://jsfiddle.net/bdec5ezo/

此外，一旦进入平板电脑和移动设备，我可以按下按钮，使其位于左侧并且不居中吗？

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

删除.btn类中的填充，然后您可以看到按钮中心的高度和宽度

要让它在移动设备和平板电脑中具有响应性，您必须使用媒体查询

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;
}

位置按钮超过图像Bootstrap CSS

3 个答案: