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

时间：2017-05-01 07:30:28

标签： html css html5

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

但所有内容都在左侧。它显示如下： enter image description here

我想要中心部分的内容，但仍然是相同的格式。我该怎么办？

此外，我发现我的h1-h4 css不起作用，当我修改字体大小时，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;
}

这种风格实际上就是我想要的。

2 个答案:

答案 0 :(得分：1)

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

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

因此，请将您的centered规则更改为此规则，并将其正确居中

.centered {
    display: inline-block;
}

由于父级上的text-align: center使centered元素中的文字也对齐居中，就像

一样
  

简介
第二章

您只需将text-align: left添加到centered规则

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

Stack snippet

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

这是您的固定代码。只需按原样复制并粘贴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>

CSS 

body
{
 font-family: Cambria,Calibri,"Arial","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 18px;    
      text-align: center;
    margin: 0 auto;
}

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

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

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

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


p {
    text-indent: 25px;
}



.centered {
    margin: 0 auto;
    text-align: center;
    width: 15%;
}

干杯！

相关问题
最新问题