我有一张带有BG图像的DIV,我想在DIV中垂直和水平居中只有2个段落。这是代码:
代码:
#dark-table-carol {
background-color: #2e2e2e;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
background-image: url(http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/carol-candy-carts-quote.jpg);
height: 600px;
background-repeat: no-repeat;
background-position: center bottom;
margin: auto;
/*
position: absolute;
background-size:contain;
top: 0;
left: 0;
bottom: 0;
right: 0;
*/
}
<div id="dark-table-carol">
<h3 id="dark-table-head-style" align="center">"It was like Scott reached into my head and saw exactly what I wanted to achieve. He brought my ideas to life very quickly!</h3>
<p id="dark-table-paragraph" align="center">
Carol Davies - Carol's Candy Carts
</p>
</div>
我尝试过一些事情,显然是vertical-align:middle;
,将top和amp;的填充设置为50%底部,但没有运气。
任何建议都会很棒:)谢谢! 斯科特
答案 0 :(得分:2)
您可以将以下两种样式添加到图像容器中。
React.createElement('span', {
onClick: this._toggleRemoveOption.bind(null, param1, param2)
}, span2);
_toggleRemoveOption: function(param1, param2, e){
$(e.target).toggleClass("remove");
console.log(e.target);
console.log(param1);
console.log(param2);
},
https://jsfiddle.net/h3qh9pgu/
我一直在寻找更好的解决方案,因为我给你的那个不适合我。唉,我找不到答案。希望这对你有用。它在小提琴中起作用。
答案 1 :(得分:1)
我更喜欢使用top
bottom
left
和right
属性来固定元素。
更改这些值以查看其行为方式。请记住添加margin
和position
属性,如下所示。
#container{
position:relative;
width:300px;
height:300px;
border:dotted 1px #33aaff;
}
#child{
width:50px;
height:50px;
background-color:#ff55aa;
position: absolute;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
}
<div id="container">
<div id="child"></div>
</div>
答案 2 :(得分:1)
#dark-table-carol {
display: table;
background-color: #2e2e2e;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
background-image: url(http://scott.ewarena.com/blog/wp-content/themes/bootstrapstarter/carol-candy-carts-quote.jpg);
/*background-size:contain; */
height: 600px;
background-repeat: no-repeat;
background-position: center bottom;
margin: auto;
/*position: absolute;
top: 0; left: 0; bottom: 0; right: 0;*/
}
.inner {
display: table-cell;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
}
&#13;
<div id="dark-table-carol">
<div class="inner">
<h3 id="dark-table-head-style" align="center">"It was like Scott reached into my head and saw exactly what I wanted to achieve. He brought my ideas to life very quickly!</h3>
<p id="dark-table-paragraph" align="center">
Carol Davies - Carol's Candy Carts
</p>
</div>
&#13;