Centrer tekst i HTML

Forfatter: Tamara Smith
Oprettelsesdato: 28 Januar 2021
Opdateringsdato: 1 Juli 2024
Anonim
Center The Text In Website || HTML, CSS
Video.: Center The Text In Website || HTML, CSS

Indhold

Denne wikiHow lærer dig, hvordan du centrerer tekst på et HTML-websted. Vi bruger CSS (Cascading Style Sheets eller style sheets) til dette. Vi plejede at centrere i HTML ved hjælp af center>tag, men dette fungerer ikke længere i de fleste browsere.

At træde

Metode 1 af 2: Brug af CSS

  1. Åbn tekstfilen, hvor du beskriver dine stilarter. Nu er det center>tag ikke længere bruges, opret et nyt element i denne fil, der centrerer tekst i bestemte områder af dit HTML-dokument. Hvis du ikke har en separat CSS-fil, er koderne øverst i HTML-dokumentet mellem "style>" og "/ style>" tags.
    • Som den stil>- og / stil>tags er der ikke endnu, du kan placere dem direkte under krop>tag på følgende måde:
    • ! DOCTYPE html> html> body> style> / style>

  2. Opret en klasse, der centrerer tekst. Det div>tag fortæller dit HTML-dokument, hvilket specifikt afsnit denne klasse vedrører. Indtast følgende mellem "stil" tags, og sørg for at klikke to gange ↵ Indtast efter første linje:

      div.a {}

  3. Tilføj tekstjusteringejendom. Type tekstjustering: center; mellem seler i div.a-afsnit. "Overskriften" ser nu sådan ud:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / stil>

  4. Tilføj den rigtige divtag til den tekst, du vil centrere. Du gør dette gennem div>tag over denne tekst og luk den med en / div>tag under denne tekst. For eksempel, hvis du vil centrere en titel og afsnittet under den, ser det sådan ud:

      div> h1> Velkommen til min hjemmeside / h1> p> Denne hjemmeside er primært til at give information om ting. / p> / div>

  5. Brug div.atag for at centrere andre elementer. Når du vil centrere et andet element, f.eks. Indhold mellem tags p> / p> og h2> / h2>), du skriver div> for dette element og / div> bagefter. Da du allerede har defineret "div.a" som den centrerende CSS-kode, er disse elementer nu også centreret.

      stil> div.a {text-align: center; } / style> div> h2> Donationer er velkomne / h2> p> please / p> / div>

  6. Tjek dit dokument. Selvom teksten på din webside naturligvis er anderledes, skal den se sådan ud:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / stil> div> h1> Velkommen til min hjemmeside / h1> p> Denne webside er hovedsageligt til information om ting. / p> / div> div> h2> Donationer er velkomne / h2> p> tak / p> / div> / body> / html>

Metode 2 af 2: Brug af "center" -tagget i HTML

  1. Åbn dit HTML-dokument. Denne metode beskriver, hvordan man får det forældede center>tag. Denne metode fungerer muligvis stadig i en række browsere, men det er bedst ikke at stole på det for meget.
  2. Find den tekst, du vil centrere. Rul ned i dit dokument, indtil du finder titlen, afsnittet eller anden tekst, du vil centrere.
  3. Placer "center" -koden på begge sider af teksten. Koden ser sådan ud center> tekst / center>. Her er "tekst" den tekst, der skal centreres. Hvis der er andre tags i denne tekst, såsom "p> / p>" foran et afsnit, skal du placere "center" -tags uden for eksisterende tags.

      center> h1> Velkommen til min hjemmeside / h1> / center> center> Gør dig komfortabel! / center>

  4. Tjek dit HTML-dokument. Det skal se sådan ud:

      ! DOCTYPE html> html> body> h1> center> Velkommen til min hjemmeside / center> / h1> center> Gør det nemt for dig selv! / Center> p1> Denne hjemmeside er primært til at give information om ting. / P1> / body > / html>