html 为什么justify-content：center不会将h2和#experience_content项移动到.experience框的中心？

ubbxdtey 于 2023-11-15 发布在其他

关注(0)|答案(1)|浏览(150)

此问题在此处已有答案：

Flexbox: center horizontally and vertically（14个回答）
6天前关闭.

<html>
<head>
<style>
.experience {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.experience h2 {
    
}
#experience_content {
    display: flex;
    gap: 10px;
}
</style>
</head>
<body>
    <section class="experience">
            
        <h2>Work Experience</h2>
            
        <div id="experience_content">
            <img src=./images/supermarket.jpg width="260" height="195" alt=" shopping center">
                    
        <p> Please help me solve this stupid problem. I beg you.</p>
        </div>
    </section>
</body>
</html>

我试着从.experience元素中删除h2元素。
我在#experience_content元素上尝试了justify-content：center，但对img和p元素也不起作用。

Html

来源：https://stackoverflow.com/questions/77442861/why-wont-justify-content-center-move-the-h2-and-experience-content-items-to-t

1条答案

按热度按时间

wvyml7n51#

你所面临的问题是因为你将justify-content: center应用到一个带有flex-direction: column的flex容器。justify-content属性沿着flex容器的 * main-axis * 工作，在本例中，由于flex-direction: column，它是垂直轴。如果你想水平居中，你需要使用在横轴上工作的属性align-items。

<html>
<head>
  <style>
    .experience {
      display: flex;
      flex-direction: column;
      align-items: center;
      /* <-- Here */
    }
    
    .experience h2 {}
    
    #experience_content {
      gap: 10px;
    }
  </style>
</head>
<body>
  <section class="experience">
    <h2>Work Experience</h2>
    <div id="experience_content">
      <img src=./images/supermarket.jpg width="260" height="195" alt=" shopping center">
      <p> Please help me solve this stupid problem. I beg you.</p>
    </div>
  </section>
</body>
</html>

字符串

展开查看全部

赞(0）回复(0）举报 2023-11-15

我来回答

html 为什么justify-content：center不会将h2和#experience_content项移动到.experience框的中心？

1条答案

相关问题

热门标签

最新问答