Question

我有一张带有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％底部，但没有运气。

任何建议都会很棒:)谢谢！斯科特

Answer 1

您可以将以下两种样式添加到图像容器中。

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/

我一直在寻找更好的解决方案，因为我给你的那个不适合我。唉，我找不到答案。希望这对你有用。它在小提琴中起作用。

Answer 2

我更喜欢使用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>

Answer 3

＆＃13;

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

垂直＆amp; DIV中的水平对齐

3 个答案: