如果要居中的DIV按鈕,同時有一個背景圖像的DIV。我會建議,爲div分配一個背景圖像,而不是插入圖像到div中。退房小提琴:
http://jsfiddle.net/49s505sa/1/
HTML:
<div id="wrapper">
<button type="button">Your Button</button>
</div>
CSS:
#wrapper {
width: 100%;
height: 400px;
border: 1px solid black;
background: url('http://placehold.it/350x150') /*assign image, for demo purposes */
}
button {
height: 20px;
position: relative;
margin: -20px -50px;
width: 100px;
top: 50%;
left: 50%;
}
所以,裏面的渲染方法
var style = {
backgroundImage: 'url(' + album.photos.data[0].source+ ')'
}
<div className={"panel-body"} style={style}>
{(this.state.isMouseInsideID === album.id) ? <button>Your Button</button> : null}
</div>
這樣,我們將動態分配圖像到特定的div。而且不必太擔心造型。
希望有幫助!
使用CSS,相對或絕對位置,你想要的按鈕,它 –
作爲@JaromandaX提到的,設置一個相對/絕對具有正確的z-index,應該做這個我試過'.mynew-BTN { 位置工作 –