代码之家 › 专栏 › 技术社区 › Sanchali

如何使用html在网页中进行居中对齐?

visual-studio-code visual-studio css html javascript

Sanchali · 技术社区 · 2 年前

在html中,我们可以在代码中写些什么来将我的网页内容放在中心??我曾尝试在{center}标记和{/center}中编写代码,但不起作用。那么还有其他选择吗??

我试着把重心对准,但没有成功。

3 回复 | 直到 2 年前

Yash Soni 2 年前

建议的方法是使用 CSS文本对齐属性 。您可以将此属性应用于各种HTML元素,例如,

,或整个主体元素以使其内容居中。

以下是一个示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Content</title>
  <style>
    p {
      text-align: center;
    }
  </style>
</head>
<body>
  <p>This paragraph is centered horizontally on the webpage.</p>
</body>
</html>

CSS:

body {
  text-align: center;
}

对于需要水平和垂直居中的更复杂布局,可以使用CSS属性进行探索,如 边距:0自动 ; 或组合 水平对齐 具有其他定位特性。

Holo 2 年前

尽管从技术上讲它仍然是HTML的一部分 <center> 标签为 deprecated in HTML 4.01 强调CSS样式表是所有样式和格式参数的新家。那要追溯到1999年。

现在,您应该创建 selector 在CSS中,然后设置特定效果所需的属性。

非常一般的例子:

.centerThisClass {
  text-align: center;
  margin: auto;
  justify-content: center;
  display: flex;
}

Tajpuriya 2 年前

如果您想仅通过HTML将内容集中在网页中,请使用 center 标签

<center>
<h2>Hello world</h2>
<img src="https://picsum.photos/200" alt="200px square image by picsum" width="200" height="200">
</center>

不管怎样 deprecated 建议改用CSS。

将内容集中在 div .

<div style = "text-align: center;">
   <h2>Inside div</h2>
   <img src="https://picsum.photos/200" alt="200px square image by picsum" width="200" height="200">
</div>

居中 div 本身及其内容

  <div style = "width:50%; margin: 0 auto; text-align: center;">
    <h2>Inside div</h2>
    <img src="https://picsum.photos/200" alt="200px square image by picsum" width="200" height="200">
</div>