响应式 Div 中图像的中心按钮答案

【问题标题】：Center Button Over Image in Responsive Div响应式 Div 中图像的中心按钮
【发布时间】：2015-07-16 22:06:53
【问题描述】：

Div 包含一个背景图像 - 在运行时提供（因此不能使用 img 作为背景），图像顶部是一个按钮。第一种方法是使用绝对定位将按钮放置在图像上方。这一直有效，直到页面调整大小并且 div 调整大小。

第一个 div 是我想要的，2 和 3 显示调整大小后会发生什么

div 图像也是可选的，所以如果没有给出，div 应该有一个 bg-color

#img_container {
    position:relative;
    display:inline-block;
    text-align:center;
    border:1px solid red;
    background-color:gray;
}

.button {
    position:absolute;
    bottom:78px;
    right:40px;
    width:100px;
    height:30px;
}
.resize {
    width:300px;
    height:200px;
}

<div id="img_container">
    <img src="http://jsfiddle.net/img/initializing.png"/>
     <button class="button"> click here </button>
</div>
<br>
<div class="resize" id="img_container">
    <img src="http://jsfiddle.net/img/initializing.png"/>
    <button class="button"> click here </button>
</div>
<br>
<div class="resize" id="img_container">
    <button class="button"> click here </button>
</div>

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

如果您知道某物的宽度，您可以使用减半宽度和边距并将其放置在中间，如下面的示例所示，它将位于页面左右两侧的中间。这也适用于顶部和底部定位，以使对象位于屏幕或区域的确切中心。像你一样为position:absolute工作。

这也是一样的：

.button{
position:absolute;
width:100px;
height:30px;
top:50%;
left:50%;
margin: -15px 0px 0px -50px;
}

JSFIDDLE

#img_container {
    position:relative;
    display:inline-block;
    text-align:center;
    border:1px solid red;
    background-color:gray;
}

.button {
    position:absolute;
    bottom:50%;
    right:50%;
    width:100px;
    height:30px;
margin:0px -50px -15px 0px;
}
.resize {
    width:300px;
    height:200px;
}

<div id="img_container">
    <img src="http://jsfiddle.net/img/initializing.png"/>
     <button class="button"> click here </button>
</div>
<br>
<div class="resize" id="img_container">
    <img src="http://jsfiddle.net/img/initializing.png"/>
    <button class="button"> click here </button>
</div>
<br>
<div class="resize" id="img_container">
    <button class="button"> click here </button>
</div>

【讨论】：

【解决方案2】：

试试这个css

.button {
  position: absolute;
  width: 100px;
  height: 30px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

检查>>http://jsfiddle.net/ubWuX/331/

#img_container {
    position:relative;
    display:inline-block;
    text-align:center;
    border:1px solid red;
    background-color:gray;
}

.button {
  position: absolute;
  width: 100px;
  height: 30px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.resize {
    width:300px;
    height:200px;
}

<div id="img_container">
    <img src="http://jsfiddle.net/img/initializing.png"/>
     <button class="button"> click here </button>
</div>
<br>
<div class="resize" id="img_container">
    <img src="http://jsfiddle.net/img/initializing.png"/>
    <button class="button"> click here </button>
</div>
<br>
<div class="resize" id="img_container">
    <button class="button"> click here </button>
</div>

【讨论】：