CSS 布局有点偏离（不显示段落和标题）
CSS layout a bit off(don't show the paragraphs and heading)
我正在尝试创建一个 Web 服务器，该服务器使用 node.js 的文件夹中的 html、css 和 jpeg 文件，不使用 express 或任何其他框架。到目前为止，它正在解决一个问题。标题和前几句没有出现。我如何在不触及 css 和 html 的情况下修复它？这是它的样子 http://imgur.com/G3LgtVW
我的文件夹结构如下所示：
folderName
├── index.html
├── style.css
├── penguin.jpg
test.js (which contains)
html, body {
height: 100%;
}
body, h1 {
margin: 10px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
main {
text-align: center;
color: navy;
}
figcaption {
font-size: 1.5em;
font-family: cursive;
font-size: 0.8em;
color: #001125;
}
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>Penguin</title>
</head>
<body>
<main>
<h1>Penguins</h1>
<p>Penguins (order Sphenisciformes, family Spheniscidae) are a group of aquatic, flightless birds. They live almost exclusively in the Southern Hemisphere, with only one species, the Galapagos penguin, found north of the equator. Highly adapted for life in the water, penguins have countershaded dark and white plumage, and their wings have evolved into flippers. Most penguins feed on krill, fish, squid and other forms of sealife caught while swimming underwater. They spend about half of their lives on land and half in the oceans.
Although almost all penguin species are native to the Southern Hemisphere, they are not found only in cold climates, such as Antarctica. In fact, only a few species of penguin live so far south. Several species are found in the temperate zone, and one species, the Galápagos penguin, lives near the equator..The largest living species is the emperor penguin (Aptenodytes forsteri): on average adults are about 1.1 m (3 ft 7 in) tall and weigh 35 kg (77 lb) or more. The smallest penguin species is the little blue penguin (Eudyptula minor), also known as the fairy penguin, which stands around 40 cm (16 in) tall and weighs 1 kg (2.2 lb). Among extant penguins, larger penguins inhabit colder regions, while smaller penguins are generally found in temperate or even tropical climates (see also Bergmann's rule). Some prehistoric species attained enormous sizes, becoming as tall or as heavy as an adult human. These were not restricted to Antarctic regions; on the contrary, subantarctic regions harboured high diversity, and at least one giant penguin occurred in a region around 2,000 km south of the equator 35 mya, in a climate decidedly warmer than today.</p>
<figure>
<img src="penguin.jpg" alt="Penguin"/>
<figcaption>Adélie penguin (Pygoscelis adeliae) feeding young. Like its relatives, a neatly bi-coloured species with a head marking. </figcaption>
</figure>
</main>
</body>
</html>
"The heading and first few sentences are not showing up" 因为您将 body 的显示定义为 flex 并将其内容居中。
对于你的HTML内容，我认为flex-direction应该是column（内容垂直布局），而不是默认值row，因此下面的CSS 更改将解决问题：
body {
...
flex-direction: column;
justify-content: flex-start;
}
html, body {
height: 100%;
}
body, h1 {
margin: 10px;
}
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
main {
text-align: center;
color: navy;
}
figcaption {
font-size: 1.5em;
font-family: cursive;
font-size: 0.8em;
color: #001125;
}
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>Penguin</title>
</head>
<body>
<main>
<h1>Penguins</h1>
<p>Penguins (order Sphenisciformes, family Spheniscidae) are a group of aquatic, flightless birds. They live almost exclusively in the Southern Hemisphere, with only one species, the Galapagos penguin, found north of the equator. Highly adapted for life in the water, penguins have countershaded dark and white plumage, and their wings have evolved into flippers. Most penguins feed on krill, fish, squid and other forms of sealife caught while swimming underwater. They spend about half of their lives on land and half in the oceans.
Although almost all penguin species are native to the Southern Hemisphere, they are not found only in cold climates, such as Antarctica. In fact, only a few species of penguin live so far south. Several species are found in the temperate zone, and one species, the Galápagos penguin, lives near the equator..The largest living species is the emperor penguin (Aptenodytes forsteri): on average adults are about 1.1 m (3 ft 7 in) tall and weigh 35 kg (77 lb) or more. The smallest penguin species is the little blue penguin (Eudyptula minor), also known as the fairy penguin, which stands around 40 cm (16 in) tall and weighs 1 kg (2.2 lb). Among extant penguins, larger penguins inhabit colder regions, while smaller penguins are generally found in temperate or even tropical climates (see also Bergmann's rule). Some prehistoric species attained enormous sizes, becoming as tall or as heavy as an adult human. These were not restricted to Antarctic regions; on the contrary, subantarctic regions harboured high diversity, and at least one giant penguin occurred in a region around 2,000 km south of the equator 35 mya, in a climate decidedly warmer than today.</p>
<figure>
<img src="penguin.jpg" alt="Penguin"/>
<figcaption>Adélie penguin (Pygoscelis adeliae) feeding young. Like its relatives, a neatly bi-coloured species with a head marking. </figcaption>
</figure>
</main>
</body>
</html>
我正在尝试创建一个 Web 服务器，该服务器使用 node.js 的文件夹中的 html、css 和 jpeg 文件，不使用 express 或任何其他框架。到目前为止，它正在解决一个问题。标题和前几句没有出现。我如何在不触及 css 和 html 的情况下修复它？这是它的样子 http://imgur.com/G3LgtVW
我的文件夹结构如下所示：
folderName
├── index.html
├── style.css
├── penguin.jpg
test.js (which contains)
html, body {
height: 100%;
}
body, h1 {
margin: 10px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
main {
text-align: center;
color: navy;
}
figcaption {
font-size: 1.5em;
font-family: cursive;
font-size: 0.8em;
color: #001125;
}
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>Penguin</title>
</head>
<body>
<main>
<h1>Penguins</h1>
<p>Penguins (order Sphenisciformes, family Spheniscidae) are a group of aquatic, flightless birds. They live almost exclusively in the Southern Hemisphere, with only one species, the Galapagos penguin, found north of the equator. Highly adapted for life in the water, penguins have countershaded dark and white plumage, and their wings have evolved into flippers. Most penguins feed on krill, fish, squid and other forms of sealife caught while swimming underwater. They spend about half of their lives on land and half in the oceans.
Although almost all penguin species are native to the Southern Hemisphere, they are not found only in cold climates, such as Antarctica. In fact, only a few species of penguin live so far south. Several species are found in the temperate zone, and one species, the Galápagos penguin, lives near the equator..The largest living species is the emperor penguin (Aptenodytes forsteri): on average adults are about 1.1 m (3 ft 7 in) tall and weigh 35 kg (77 lb) or more. The smallest penguin species is the little blue penguin (Eudyptula minor), also known as the fairy penguin, which stands around 40 cm (16 in) tall and weighs 1 kg (2.2 lb). Among extant penguins, larger penguins inhabit colder regions, while smaller penguins are generally found in temperate or even tropical climates (see also Bergmann's rule). Some prehistoric species attained enormous sizes, becoming as tall or as heavy as an adult human. These were not restricted to Antarctic regions; on the contrary, subantarctic regions harboured high diversity, and at least one giant penguin occurred in a region around 2,000 km south of the equator 35 mya, in a climate decidedly warmer than today.</p>
<figure>
<img src="penguin.jpg" alt="Penguin"/>
<figcaption>Adélie penguin (Pygoscelis adeliae) feeding young. Like its relatives, a neatly bi-coloured species with a head marking. </figcaption>
</figure>
</main>
</body>
</html>
"The heading and first few sentences are not showing up" 因为您将 body 的显示定义为 flex 并将其内容居中。
对于你的HTML内容，我认为flex-direction应该是column（内容垂直布局），而不是默认值row，因此下面的CSS 更改将解决问题：
body {
...
flex-direction: column;
justify-content: flex-start;
}
html, body {
height: 100%;
}
body, h1 {
margin: 10px;
}
body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
main {
text-align: center;
color: navy;
}
figcaption {
font-size: 1.5em;
font-family: cursive;
font-size: 0.8em;
color: #001125;
}
<!--index.html-->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>Penguin</title>
</head>
<body>
<main>
<h1>Penguins</h1>
<p>Penguins (order Sphenisciformes, family Spheniscidae) are a group of aquatic, flightless birds. They live almost exclusively in the Southern Hemisphere, with only one species, the Galapagos penguin, found north of the equator. Highly adapted for life in the water, penguins have countershaded dark and white plumage, and their wings have evolved into flippers. Most penguins feed on krill, fish, squid and other forms of sealife caught while swimming underwater. They spend about half of their lives on land and half in the oceans.
Although almost all penguin species are native to the Southern Hemisphere, they are not found only in cold climates, such as Antarctica. In fact, only a few species of penguin live so far south. Several species are found in the temperate zone, and one species, the Galápagos penguin, lives near the equator..The largest living species is the emperor penguin (Aptenodytes forsteri): on average adults are about 1.1 m (3 ft 7 in) tall and weigh 35 kg (77 lb) or more. The smallest penguin species is the little blue penguin (Eudyptula minor), also known as the fairy penguin, which stands around 40 cm (16 in) tall and weighs 1 kg (2.2 lb). Among extant penguins, larger penguins inhabit colder regions, while smaller penguins are generally found in temperate or even tropical climates (see also Bergmann's rule). Some prehistoric species attained enormous sizes, becoming as tall or as heavy as an adult human. These were not restricted to Antarctic regions; on the contrary, subantarctic regions harboured high diversity, and at least one giant penguin occurred in a region around 2,000 km south of the equator 35 mya, in a climate decidedly warmer than today.</p>
<figure>
<img src="penguin.jpg" alt="Penguin"/>
<figcaption>Adélie penguin (Pygoscelis adeliae) feeding young. Like its relatives, a neatly bi-coloured species with a head marking. </figcaption>
</figure>
</main>
</body>
</html>