在 DIV 中垂直和水平对齐

Posted 2023-03-05

【中文标题】在 DIV 中垂直和水平对齐

【英文标题】：Vertical & Horizontal align in a DIV

【发布时间】：2017-07-01 08:32:44

【问题描述】：

我有一个带有 BG 图像的 DIV，我想在该 DIV 中将两个段落垂直和水平居中。代码如下：

代码：

#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;，将顶部和底部的填充设置为 50%，但没有运气。

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

【参考方案1】：

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

display: table-cell;
vertical-align: middle;

https://jsfiddle.net/h3qh9pgu/

我整天都在寻找更好的解决方案，因为我给你的解决方案对我不起作用。唉，我找不到答案。希望这对你有用。它在小提琴中奏效了。

【讨论】：

这很奏效。非常感谢！我试过垂直对齐：中间；但没有使用 display: table-cell;选项。我将不得不阅读它的用法。谢谢！

【参考方案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>

【参考方案3】：

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

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

【讨论】：

为父div添加display:table;对于子 div（在这种情况下，我给了它类内部）添加 display: table-cell;垂直对齐：中间；左边距：自动；边距右：自动；

不幸的是，无论出于何种原因，这都不起作用:(