So zentrieren Sie die sortierte Listennummer in HTML

Ich lerne gerade HTML-Programmierung. Ich habe ein Problem:So zentrieren Sie die sortierte Listennummer in HTML

Wenn ich so:

<html> 
<body align="middle"> 
HEADLINE 
<ol> 
<li>First Item</li> 
</ol> 
</body> 
</html>

Das Problem ist die Nummer (1) auf der linken Seite ist, wenn ich es wollte, unter der Überschrift ausgerichtet werden. Wie kann ich den gesamten Listeneintrag in die Mitte bringen?

Ich brauche atleast 10 Ruf Bilder hinzufügen, damit ich einen Link zu einer anderen Website zur Verfügung stellen würde für Dich das Bild zu sehen: ALIGNING

Quelle

2013-10-14 Nikolas

Haben Sie ein Bild genau zu zeigen, was Sie wollen? –

Kennen Sie überhaupt css? 'ol li {Textausrichtung: Mitte; Breite: 300px; } 'zum Beispiel –

Das klingt wie ein Job für CSS, nicht HTML. –

Sie richten Texte im Körper.

Versuchen Sie folgendes:

.center { 
 
    text-align: center; 
 
    list-style-position: inside; 
 
}

<h4 align="center">HEADLINE</h4> 
 
<ol class="center"> 
 
    <li>First Item</li> 
 
</ol>

Quelle

2013-10-14 16:58:38

Das funktionierte für mich, warum funktionierte es nicht in einer separaten CSS-Datei, wie ich es versuchte? – Nikolas

Für Leser - der Schlüssel dazu ist die 'liste-style-position: inside;'. Es bewirkt, dass der Browser den Listenmarker (in diesem Fall die Zahl) als inline mit dem Text gerendert betrachtet, so dass er von "text-align" beeinflusst werden kann. – Beejamin

Nikolas, auf eine geordnete Liste in CSS die Zahlen Ausrichtung ist wie folgt:

 ol 
    { 
     display: inline-block; 
     margin-left: auto; 
     margin-right: auto; 
    }

** Sie müssen eine Anzeige- verwenden blockieren, weil Sie Ihre Liste in eine Box setzen müssen, damit die Nummern mit der Liste zentriert werden.

Quelle

2015-09-23 16:21:07 Halie

Weiter zu Nuno Duartes Antwort können Sie Brüche nach Listennummern hinzufügen, die (ich denke) es im zentrierten Modus besser aussehen lässt. (Disclaimer: Nicht in allen Browsern getestet)

.text-center { 
 
    text-align: center; 
 
} 
 
ol.text-center { 
 
    list-style-position: inside; 
 
    padding-left: inherit; /*Get rid of padding to center correctly*/ 
 
} 
 
    ol.text-center > li::before { 
 
     content: "\A"; 
 
     white-space: pre; 
 
    }

<h4 class="text-center">HEADLINE</h4> 
 
<ol class="text-center"> 
 
    <li>First Item</li> 
 
</ol>

Quelle

2018-03-05 10:29:08 Godsayah

So zentrieren Sie die sortierte Listennummer in HTML

Antwort

Verwandte Themen