Flexbox 属性应用于文本而不是 Flex 容器

问题描述 投票：0回答：1

我是一名经验不足的程序员，使用 HTML 和 CSS 创建温度转换器网站。我正在使用一个容器来显示文本“温度转换器”，我希望将其显示在网页的顶部和中心。 我在开发早期遇到了一个问题，同时开始处理弹性盒。当在容器的 id 中使用 justify-content 和align-self 时，这些属性适用于容器内的文本而不是容器本身，将文本移动到容器的顶部和中心。

CSS代码：

div {
    display: flex;
}

#title {
    align-self: flex-start;
    justify-content: center;
    background-color: lightgray;
    font: arial;
    text-align: center;
    height: 100px;
    max-width: 400px;
}

HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <title>placeholder</title>
        <link rel="stylesheet" href="temperatureConverter.css">
    </head>

    <body>
        <div id="title">Temperature Converter</div><br>
    </body>
</html>

我尝试了几种不同的flex属性组合，包括justify-self和align-items，以及将它们移动到CSS代码的div部分，但没有任何帮助。我发现这里提出的类似问题不适用于我的问题。 我想由于我的经验不足，我会错过一些明显的东西，但如果能帮助移动容器而不是文本，我们将不胜感激。

html css flexbox
1个回答
0
投票

您的代码中有一个 div，它的 id 为 

title
，因此您的 
div
和 
#title
的 CSS 全部应用于该 div。 要使用 Flexbox 水平居中某些内容，您可以使用以下代码：

body {
  display: flex;
  justify-content: center;
}
<body>
  <div>
    Content to be centered horizontally
  </div>
</body

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.