文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在浏览器中心制作html内容？

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

Stack Overflow用户

提问于 2017-05-01 07:30:27

回答 1查看 60关注 0票数 0

我是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>

style.css：

h1 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 48px;
}

h2 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 44px;
}

h3 {
    text-align: left;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 42px;
}

h4 {
    text-align: left;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 40px;
}

p {
    text-indent: 25px;
}

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    width: 800px;
}

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

我希望内容在中间部分，并保持相同的格式。我该怎么办？

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

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

index.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>

style.css：

h1 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 34px;
}

h2 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 30px;
}

h3 {
    text-align: left;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 26px;
}

h4 {
    text-align: left;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 24px;
}


p {
    text-indent: 25px;
}

body {
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 20px;
    margin-left: 20%;
    margin-right: 20%;
    min-width: 600px;
    max-width: 1024px;
}

这种风格正是我想要的。

css

html

回答 1

Stack Overflow用户

发布于 2017-05-01 08:15:25

使内容水平居中的最简单和最自然的方法是在元素上使用display: inline-block;，在其父元素上使用text-align: center。

它在块元素上优于margin: 0 auto，它不需要宽度，它只是根据其内容宽度进行调整

因此，将您的centered规则更改为此，它将正确地居中

.centered {
    display: inline-block;
}

当父元素上的text-align: center生成centered元素中的文本时，centered元素也以居中对齐，如

引言第二章

只需将text-align: left添加到centered规则中即可

.centered {
    display: inline-block;
    text-align: left;
}

堆栈段

h1 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 48px;
}

h2 {
    text-align: center;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 44px;
}

h3 {
    text-align: left;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 42px;
}

h4 {
    text-align: left;
    font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 40px;
}

/*  removed this as it cause the text to not center correct
p {
    text-indent: 25px;
}
*/

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    display: inline-block;
    text-align: left;
}

<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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43715732

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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