css 将两个div居中，一个在另一个下面

zbdgwd5y 于 2022-12-30 发布在其他

关注(0)|答案(4)|浏览(137)

我尝试将两个div一个在另一个下面，在另一个div中居中。但这是我得到的最好结果，以一种响应方式。result I got

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  background-color: lightgray;
  height: 100%;
  width: 80%;
  border-radius: 25px;
}

.cliente_info,
.cliente_table {
  display: inline-block;
}

.cliente_info {
  width: 90%;
  height: 45%;
  background-color: azure;
}

.cliente_table {
  width: 90%;
  height: 45%;
  background-color: rgb(156, 204, 204);
}

<div class="content">
  <div class="cliente_info">
  </div>
  <div class="cliente_table">
  </div>
</div>

我想让div看起来像下面的图像。Result expected

css

来源：https://stackoverflow.com/questions/74932058/center-two-divs-one-under-the-other

4条答案

按热度按时间

k97glaaz1#

尝试将flex-flow: column添加到.content类，并将inline-block元素更改为block

赞(0）回复(0）举报 2022-12-30

roqulrg32#

除了将flex-direction: column添加到.content类之外，还可以添加justify-content: space-around以在每个关联元素之前、之间和之后获得空格。如果不希望这样做，可以将顶部和底部填充应用于.content类。

赞(0）回复(0）举报 2022-12-30

gdrx4gfi3#

- 您可以尝试以下逻辑：**

.content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 500px;
      height: 500px;
      background-color: lightgray;
    }

    /* Height => (2 * 45%) = 90%  =>45% for cliente_info & 45% for cliente_table */
    .cliente_info,
    .cliente_table {
      width: 90%;
      height: 45%;
    }

    .cliente_info {
      background-color: cyan;
    }
    .cliente_table {
      background-color: orange;
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="content">
      <div class="cliente_info"></div>
      <div class="cliente_table"></div>
    </div>
  </body>
</html>

赞(0）回复(0）举报 2022-12-30

ncecgwcz4#

这里有很多注解：

注1：

默认情况下，flex元素有一个行的flex-direction，所以要使他的子元素站在一个列中，将flex-direction设置为列

注2：

例如，如果您希望使用flex或grid控制某些元素及其父元素，请尽量避免将display用于子元素，因为在大多数情况下，它将被忽略，对齐方式将来自父设置。
因此，从子节点中删除display: inline-block。

注3：

我们将parent和children的所有维度设置为百分比，这意味着父元素的祖父必须有宽度和高度，在本例中为body，以便父元素知道他取了什么值。
或者只设置宽度和高度而不设置百分比。

编辑后的代码：

body{
    width: 100vw; height: 100vh; margin: 0;
}

.content {
  height: 100%; width: 80%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  margin-left: 5px; border-radius: 25px;
  background-color: lightgray;
}

.cliente_info {
  width: 90%; height: 45%;
  background-color: azure;
}

.cliente_table {
  width: 90%; height: 45%;
  background-color: rgb(156, 204, 204);
}

<div class="content">
  <div class="cliente_info"></div>
  <div class="cliente_table"></div>
</div>

请注意以下几行：css中的1-3和7，以及缺少的子项显示样式。
我想现在很清楚了，如果有什么东西不见了，就告诉我。

赞(0）回复(0）举报 2022-12-30

我来回答

css 将两个div居中，一个在另一个下面

4条答案

这里有很多注解：

注1：

注2：

注3：

编辑后的代码：

相关问题

热门标签

最新问答