Centrera text i HTML

Författare: Tamara Smith
Skapelsedatum: 28 Januari 2021
Uppdatera Datum: 1 Juli 2024
Anonim
Programmering - HTML - Centrera, Vänsterställa och Högerställa text
Video: Programmering - HTML - Centrera, Vänsterställa och Högerställa text

Innehåll

Denna wikiHow lär dig hur du centrerar text på en HTML-webbplats. Vi använder CSS (Cascading Style Sheets eller stilark) för detta. Vi brukade centrera i HTML med hjälp av center>tag, men detta fungerar inte längre i de flesta webbläsare.

Att gå

Metod 1 av 2: Använda CSS

  1. Öppna textfilen där du beskriver dina stilar. Nu den center>taggen används inte längre, skapa ett nytt element i den här filen som centrerar text i vissa delar av ditt HTML-dokument. Om du inte har en separat CSS-fil finns koderna högst upp i HTML-dokumentet mellan taggarna "style>" och "/ style>".
    • Som den stil>- och / stil>taggar finns inte ännu, du kan lägga dem direkt under kropp>tagg på följande sätt:
    • ! DOCTYPE html> html> body> style> / style>

  2. Skapa en klass som centrerar text. De div>tagg berättar för ditt HTML-dokument vilket specifikt avsnitt den här klassen avser. Skriv följande mellan "stil" -taggarna och se till att klicka två gånger ↵ Gå in efter första raden:

      div.a {}

  3. Lägg till textjusterafast egendom. Typ textjustera: centrum; mellan hängslen i diva-sektion. "Rubriken" ser nu ut så här:

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

  4. Lägg till rätt divtaggen till texten du vill centrera. Du gör detta genom div>taggen ovanför denna text och stänger den med en / div>taggen under den här texten. Om du till exempel vill centrera en titel och stycket under det ser det ut så här:

      div> h1> Välkommen till min webbplats / h1> p> Denna webbplats är främst för att ge information om saker. / p> / div>

  5. Använd divatagg för att centrera andra element. När du vill centrera ett annat element, till exempel innehåll mellan taggarna p> / p> och h2> / h2>), du skriver div> för detta element och / div> i efterhand. Eftersom du redan har definierat "div.a" som den centrerande CSS-koden är dessa element nu också centrerade.

      stil> div.a {text-align: center; } / stil> div> h2> Donationer är välkomna / h2> p> snälla / p> / div>

  6. Kontrollera ditt dokument. Även om texten på din webbsida naturligtvis är annorlunda, bör den se ut så här:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / stil> div> h1> Välkommen till min hemsida / h1> p> Denna webbplats är främst för att ge information om saker. / p> / div> div> h2> Donationer är välkomna / h2> p> snälla / p> / div> / body> / html>

Metod 2 av 2: Använd taggen "center" i HTML

  1. Öppna ditt HTML-dokument. Denna metod beskriver hur man blir föråldrad center>märka. Denna metod kan fortfarande fungera i ett antal webbläsare, men det är bäst att inte lita på den för mycket.
  2. Hitta texten du vill centrera. Bläddra ner i dokumentet tills du hittar titeln, stycket eller annan text du vill centrera.
  3. Placera taggen "center" på vardera sidan av texten. Koden ser ut så här center> text / center>. Här är "text" texten som ska centreras. Om det finns andra taggar i texten, till exempel "p> / p>" före ett stycke, placera "mitt" -taggarna utanför befintliga taggar.

      center> h1> Välkommen till min hemsida / h1> / center> center> Gör dig bekväm! / center>

  4. Kontrollera ditt HTML-dokument. Det borde se ut så här:

      ! DOCTYPE html> html> body> h1> center> Välkommen till min webbplats / center> / h1> center> Gör det enkelt för dig själv! / Center> p1> Denna webbplats är främst för att ge information om saker. / P1> / body > / html>