CSSレイアウトが少しオフになっています（段落と見出しは表示されません）

node.jsを使用しているフォルダからhtml、css、およびjpegファイルを提供するWebサーバーを、エクスプレスまたは他のフレームワークなしで作成しようとしています。これまでのところ、問題を扱っています。見出しと最初の数文は表示されません。どのように私はCSSとHTMLに触れることなくそれを修正することができますか？ここでは、それはhttp://imgur.com/G3LgtVW CSSレイアウトが少しオフになっています（段落と見出しは表示されません）

マイフォルダ構造のようになりますが、このようになります：あなたはbody年代を定義するため

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>

出典

2017-04-08 user7836693

「の見出しと最初のいくつかの文章が表示されません」 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; 
 
    \t 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> 
 
    \t \t <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>

出典

2017-04-08 13:49:40 shaochuancs

ありがとうございます！今働いている。私は.jsファイルに問題があると思った – user7836693

問題は私の.jsファイルではなくCSSファイルで編集されています。再度、感謝します！ – user7836693

@ user7836693はあなたの問題を解決しましたか？はいの場合、おそらくこの回答を「受け入れる」ことができますか？ – shaochuancs

CSSレイアウトが少しオフになっています（段落と見出しは表示されません）

答えて

関連する問題