我是一个没有经验的程序员创建一个使用HTML和CSS的温度转换器网站.我正在使用一个容器来显示文本‘温度转换器’,我希望它显示在网页的顶部和中心. 我在开发早期遇到了一个问题,当时我正在使用Flexbox.在容器的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;
}

发帖主题:Re:Kolibrios

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

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

我try 了几种不同的flex属性组合,包括JUSTY-self和Align-Items,并将它们移到了css代码的div部分,但这些组合都没有任何帮助.我在这里发现的类似问题并不适用于我的问题. 我想我会因为缺乏经验而错过一些明显的东西,但帮助移动容器而不是文本将不胜感激.

推荐答案

您的代码中有一个div,它的id为title,因此div#title的css都应用于该div.Div中只有文本,所以div是flex容器,文本是flex项.通常,您会将其他元素(例如div)放入flex容器中,因此内部元素就是flex项. 要使用FlexBox将某些内容水平居中,可以使用以下代码:

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

该代码使body成为一个flex box,所以里面的div是一个flex项.当您添加其他弹性项时,默认情况下,它们将显示在第一个弹性项的右侧.因为这可能不是您想要的,所以您可以使用下面这样的代码:

#flexContainer {
  display: flex;
  justify-content: center;
}
<body>
  <div id="flexContainer">
    <div>Headline</div>
  </div>
  <div>Another element, which is displayed below the headline</div>
</body>

如果您不坚持使用FlexBox,您可以简单地将margin: 0 auto;应用到任何元素,您想要水平居中.

h1 {
  width: fit-content;
  margin: 0 auto;
}
<body>
  <h1>Headline</h1>
</body>

我添加width: fit-content是因为在默认情况下,h1元素的宽度为width: fit-content%,因此居中不会产生任何影响.

简单的text-align: center也可以(同时保持text-align: center%的宽度):

h1 {
  text-align: center;
}
<body>
  <h1>Headline</h1>
</body>

Html相关问答推荐

HTML CSS如何使用图像作为中心点将元素置于中心

你能让Cypress测试为p—fileUpload做文件上传吗?

Chrome中是否有一个本地显示密码功能,用于`input type = password/`?""<"">

如何使用html和css将两个项目垂直对齐

这<;td&>如何溢出<;表>;?

使用HTML进行DAX测量

摆动的html标签

按钮之间的HTML文本居中不正确

carousel 的垂直滚动按钮居中

标题在实时网站上闪烁

在 html 和 css 中绘制表格内的倾斜线

在 laravel 中使用 DomPDF 将数据导出为 pdf 时,第二列被拉伸

带标签 css 的 div 内的中心图标

Tailwind 网格行高度可防止拉伸到最高行的所有相同高度

Tailwind:父母动态适应子元素的身高

两部分问题 - 是什么导致了这个空白?

文本溢出:省略号不适用于 flexbox

在 jinja 模板内的 html 表中嵌套 For 循环

左右图像,响应页面大小并居中

所有幻灯片上的 Quarto RevealJS 标题