Wie HTML-Inhalte in Browser-Center zu machen?

Ich bin neu zu html/css, ich habe viele Male auf eine einfache HTML/CSS-Datei versucht, aber immer noch nicht funktioniert. Ich möchte den Inhalt im Browser zentrieren.Wie HTML-Inhalte in Browser-Center zu machen?

zwei Codequelle unter gleichen Verzeichnis sind, hier ist der Quellcode:

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

aber alle Inhalte sind in der linken Teil. es zeigt so:

Ich möchte den Inhalt im Mittelteil, und immer noch das gleiche Format. was soll ich machen ?

Außerdem fand ich meine h1-h4 CSS nicht funktioniert, wenn ich die Schriftgröße ändern, index.html hat sich überhaupt nicht geändert. warum ist es ?

danken für Ihre Hilfe, nachdem @ Code J.Sahbu liest, ich meine Quellcode wie folgt aktualisieren:

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

Dieser Stil ist eigentlich was ich will.

Quelle

2017-05-01 linrongbin

css Linie hinzufügen, body { Textausrichtung: Mitte; } – ashanrupasinghe

Hier ist Ihr fester Code. Einfach kopieren und einfügen unter HTML und CSS wie es ist.

<!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%; 
}

Prost!

Quelle

2017-05-01 07:39:41

nichts passiert ... – linrongbin

Nur 5 min werde ich es überprüfen und eine richtige Lösung geben –

Code korrigiert. Bitte aktualisieren Sie die HTML-und CSS im Antwortbereich –

Die einfachste und natürlichste Art, Inhalt horizontal zu zentrieren, ist die Verwendung von display: inline-block; für das Element und text-align: center für das übergeordnete Element.

Der Vorteil gegenüber margin: 0 auto auf einem Block-Element, ist es nicht eine Breite brauchen, einfach auf seinen Inhalt Breite basierend adjust

So Ihre centered Regel dies ändern, und es wird richtig

.centered { 
    display: inline-block; 
}

Zentrum

Als text-align: center auf der übergeordneten macht Text innerhalb des centered Element auch zentrierte Ausrichtung, wie bei der

Einführung
Kapitel

Sie einfach text-align: left zum centered Regel hinzufügen

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

Stapel Snippet

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>

Quelle

2017-05-01 08:15:25 LGSon

Wie HTML-Inhalte in Browser-Center zu machen?

Antwort

Verwandte Themen