文章/答案/技术大牛

发布

社区首页 >问答首页 >如何对齐内容中心柔性盒？

问如何对齐内容中心柔性盒？
EN

Stack Overflow用户

提问于 2022-11-18 18:49:16

回答 2查看 36关注 0票数 0

我是刚接触柔性盒的，我知道这是一个非常简单的问题，但我似乎不明白。我试图对齐中心的test2 div上的每一处，但不管我做什么，它都不会对齐。我试图证明-内容和对齐-项目，但不起作用。下面是我的代码，任何帮助都是非常感谢的。

<div style="display: flex; flex-direction: row;">

<div style='flex-grow: 1; '>

    Test

</div>


<!--Test 2 lookign to align center-->
<div style='flex-grow: 1'>Test 2 </div>

flexbox

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-11-18 19:00:27

下面是您的代码示例。

#box {
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:red; /* optional */
}

#box div {
  width: 100px;
  height: 100px;
  background-color:white; /* optional */
}

<div style="display: flex; flex-direction: row;">
  <div style="flex-grow: 1;">Test</div>

  <!--Test 2 lookign to align center-->
  <div id="box" style="flex-grow: 1;">
    <div>test2</div>
  </div>
</div>

票数 0

Stack Overflow用户

发布于 2022-11-18 21:15:10

嘿我想我解决了你的话题。如果你有什么问题可以再问我一次。再见，祝你今天愉快:)

    #position{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div id="position">
        <div id="container">
            <p>Test1</p>
            <p>Test2</p>
        </div>
    </div>
</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74494155

复制

相似问题

问如何对齐内容中心柔性盒？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何对齐内容中心柔性盒？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何对齐内容中心柔性盒？
EN