Css 如何在浏览器中心制作html内容？_Css_Html

Css 如何在浏览器中心制作html内容？

css html

Css 如何在浏览器中心制作html内容？,css,html,Css,Html,我对html/css还不熟悉，我曾多次尝试使用简单的html/css文件，但仍然不起作用。我想使内容位于浏览器的中心两个源代码位于同一目录下，以下是源代码： index.html： <!DOCTYPE HTML> <html> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <head> <link rel="alternate styles

我对html/css还不熟悉，我曾多次尝试使用简单的html/css文件，但仍然不起作用。我想使内容位于浏览器的中心

两个源代码位于同一目录下，以下是源代码：

index.html：

<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<head>
    <link rel="alternate stylesheet" type="text/css" href="style.css" />
</head>
<body>

<hr>
<h2>Head Title2</h2>
<p align="center">write something in the center</p>

<hr>
<h4>Content</h4>
<div class="centered">
Introduction<br>
Chapter<br>
<ol>
    <li>Chapter-1<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-2<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-3<br>
    <ol>
        <li>Section-1<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-2<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-3<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
    </ol>
    </li>
</ol>

<hr>
<h4>Reference</h4>
<ul>
    <li>book1</li>
    <li>book2</li>
    <li>book3</li>
</ul>

</div>
<hr>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<hr>
<h2>Head Title2</h2>
<p align="center">write something in the center</p>

<hr>
<h4>Content</h4>
Introduction<br>
Chapter<br>
<ol>
    <li>Chapter-1<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-2<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-3<br>
    <ol>
        <li>Section-1<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-2<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-3<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
    </ol>
    </li>
</ol>

<hr>
<h4>Reference</h4>
<ul>
    <li>book1</li>
    <li>book2</li>
    <li>book3</li>
</ul>

<hr>

</body>
</html>

但所有的内容都在左边。它显示如下：

我希望内容在中间部分，但格式不变。我该怎么办

此外，我发现我的h1-h4 css不工作，当我修改字体大小时，index.html根本没有改变。为什么

感谢您的帮助，在阅读了@J.Sahbu的代码之后，我更新了我的源代码，如下所示：

index.html：

<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<head>
    <link rel="alternate stylesheet" type="text/css" href="style.css" />
</head>
<body>

<hr>
<h2>Head Title2</h2>
<p align="center">write something in the center</p>

<hr>
<h4>Content</h4>
<div class="centered">
Introduction<br>
Chapter<br>
<ol>
    <li>Chapter-1<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-2<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-3<br>
    <ol>
        <li>Section-1<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-2<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-3<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
    </ol>
    </li>
</ol>

<hr>
<h4>Reference</h4>
<ul>
    <li>book1</li>
    <li>book2</li>
    <li>book3</li>
</ul>

</div>
<hr>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<hr>
<h2>Head Title2</h2>
<p align="center">write something in the center</p>

<hr>
<h4>Content</h4>
Introduction<br>
Chapter<br>
<ol>
    <li>Chapter-1<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-2<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-3<br>
    <ol>
        <li>Section-1<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-2<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-3<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
    </ol>
    </li>
</ol>

<hr>
<h4>Reference</h4>
<ul>
    <li>book1</li>
    <li>book2</li>
    <li>book3</li>
</ul>

<hr>

</body>
</html>

这种风格正是我想要的。

这是您的固定代码。只需复制并粘贴到HTML和CSS下面即可

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<hr>
<h2>Head Title2</h2>
<p align="center">write something in the center</p>

<hr>
<h4>Content</h4>
<div class="centered">
Introduction<br>
Chapter<br>
<ol>
    <li>Chapter-1<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-2<br>
    <ol>
        <li>Section-1</li>
        <li>Section-2</li>
        <li>Section-3</li>
        <li>Section-4</li>
    </ol>
    </li>
    <li>Chapter-3<br>
    <ol>
        <li>Section-1<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-2<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
        <li>Section-3<br>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        </li>
    </ol>
    </li>
</ol>

<hr>
<h4>Reference</h4>
<ul>
    <li>book1</li>
    <li>book2</li>
    <li>book3</li>
</ul>

</div>
<hr>
</body>
</html>

干杯

将内容水平居中的最简单、最自然的方法是使用

显示：内联块和其父元素上的文本对齐：居中
它比margin:0 auto
在块元素上的优势在于，它不需要宽度，只需根据其内容宽度进行调整
因此，将您的居中
规则更改为此，它将正确居中
.centered {
    display: inline-block;
}

由于父元素上的文本对齐：居中
使居中
元素内的文本也居中对齐，与
引言
章节

只需将text align:left
添加到居中的规则中即可
.centered {
    display: inline-block;
    text-align: left;
}

堆栈片段

h1{
文本对齐：居中；
字体系列：Cambria、Calibri、Arial、Microsoft YaHei、黑体","宋体",无衬线；
字体大小：48px；
}
氢{
文本对齐：居中；
字体系列：Cambria、Calibri、Arial、Microsoft YaHei、黑体","宋体“，无衬线；
字体大小：44px；
}
h3{
文本对齐：左对齐；
字体系列：Cambria、Calibri、Arial、Microsoft YaHei、黑体","宋体“，无衬线；
字体大小：42px；
}
h4{
文本对齐：左对齐；
字体系列：Cambria、Calibri、Arial、Microsoft YaHei、黑体","宋体“，无衬线；
字体大小：40px；
}
/*删除此选项，因为它会导致文本居中不正确
p{
文本缩进：25px；
}
*/
身体{
保证金：0；
填充：0；
文本对齐：居中；/**/
}
.居中{
显示：内联块；
文本对齐：左对齐；
}

标题2
在中间写点东西

内容
引言

第章

第一章

第1节
第2节
第3节
第4节

第二章

第1节
第2节
第3节
第4节

第三章

第1节

一,
二,
三,
四,
五,

第2节

一,
二,
三,
四,
五,

第3节

一,
二,
三,
四,
五,



参考文献

第一册
第二册
第三册

添加css行，正文{文本对齐：居中；}只要5分钟，我会检查它，并给出一个正确的解决方案代码更正。请更新答案区域中的html和css您有向下的投票请向上投票这个答案，并使正确answer@zhaochenyou有一种比设置固定宽度更好的居中方法。如果调整此解决方案的大小，您将看到其内容如何开始折线，这就是我的解决方案not@zhaochenyou我们可以使用@media screen在小屏幕上控制中断问题
.centered {
    display: inline-block;
    text-align: left;
}