Question

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>

2 个答案:

答案 0 :(得分：3)

答案 1 :(得分：2)

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

Answer 2

试试这个css

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

检查＆gt;＆gt; http://jsfiddle.net/ubWuX/331/

＆＃13;

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

＆＃13;

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

＆＃13;

响应Div中的图像中心按钮

2 个答案: