Центральная кнопка над изображением в ответном Div

Question

Div содержит фоновое изображение - предоставляется во время выполнения (поэтому не может использовать img в качестве фона), поверх изображения есть кнопка. Первый подход состоял в том, чтобы использовать абсолютное позиционирование для размещения кнопки над изображением. Это работает до тех пор, пока страница не будет изменена, а размер div изменится.

http://jsfiddle.net/ubWuX/330/

Первый ДИВ, что я буду за, 2 и 3 показывает, что происходит после того, как изменить размер

Также ДИВО изображение является необязательным, так что если ни один не задан, отд должны должны иметь BG-цвет

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

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

проверка >>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>