Wyśrodkuj tekst w HTML

Autor: Tamara Smith
Data Utworzenia: 28 Styczeń 2021
Data Aktualizacji: 1 Lipiec 2024
Anonim
CSS Center text Horizontal and Vertical
Wideo: CSS Center text Horizontal and Vertical

Zawartość

To wikiHow uczy, jak wyśrodkować tekst w witrynie HTML. Używamy do tego CSS (kaskadowych arkuszy stylów lub arkuszy stylów). Kiedyś wyśrodkowowaliśmy HTML przy użyciu rozszerzenia centrum>tag, ale to już nie działa w większości przeglądarek.

Do kroku

Metoda 1 z 2: Korzystanie z CSS

  1. Otwórz plik tekstowy, w którym opisujesz swoje style. Teraz centrum>znacznik nie jest już używany, utwórz nowy element w tym pliku, który wyśrodkuje tekst w określonych obszarach dokumentu HTML. Jeśli nie masz osobnego pliku CSS, kody znajdują się u góry dokumentu HTML, między tagami „style>” i „/ style>”.
    • Ponieważ styl>- i / style>tagów jeszcze nie ma, możesz je umieścić bezpośrednio pod ciało>tag w następujący sposób:
    • ! DOCTYPE html> html> body> style> / style>

  2. Utwórz klasę, która wyśrodkuje tekst. Plik div>tag informuje dokument HTML, do której konkretnej sekcji należy ta klasa. Wpisz następujące elementy między tagami „style”, pamiętając o dwukrotnym kliknięciu ↵ Enter po pierwszym wierszu:

      div.a {}

  3. Dodaj wyrównywanie tekstuwłasność. Rodzaj wyrównywanie tekstu: do środka; między szelkami w diwa-Sekcja. „Nagłówek” wygląda teraz następująco:

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

  4. Dodaj właściwy divoznacz tekst, który chcesz wyśrodkować. Robisz to poprzez div>nad tym tekstem i zamykając go rozszerzeniem / div>tag pod tym tekstem. Na przykład, jeśli chcesz wyśrodkować tytuł i akapit pod nim, wygląda to tak:

      div> h1> Witam na mojej stronie / h1> p> Ta strona służy głównie do dostarczania informacji na różne tematy. / p> / div>

  5. Użyj diwatag, aby wyśrodkować inne elementy. Gdy chcesz wyśrodkować inny element, na przykład zawartość między tagami p> / p> i h2> / h2>), ty pisz div> dla tego elementu i / div> potem. Ponieważ zdefiniowałeś już „div.a” jako centrujący kod CSS, te elementy są teraz również wyśrodkowane.

      styl> div.a {text-align: center; } / style> div> h2> Darowizny są mile widziane / h2> p> please / p> / div>

  6. Sprawdź swój dokument. Chociaż tekst na Twojej stronie jest oczywiście inny, powinien wyglądać mniej więcej tak:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style> div> h1> Witam na mojej stronie / h1> p> Ta strona służy głównie do dostarczania informacji o różnych rzeczach. / p> / div> div> h2> Darowizny są mile widziane / h2> p> please / p> / div> / body> / html>

Metoda 2 z 2: użycie tagu „center” w HTML

  1. Otwórz dokument HTML. Ta metoda opisuje, jak uzyskać przestarzały plik centrum>etykietka. Ta metoda może nadal działać w wielu przeglądarkach, ale najlepiej nie polegać na niej zbytnio.
  2. Znajdź tekst, który chcesz wyśrodkować. Przewiń dokument w dół, aż znajdziesz tytuł, akapit lub inny tekst, który chcesz wyśrodkować.
  3. Umieść znacznik „środek” po obu stronach tekstu. Kod wygląda następująco środek> tekst / środek>. Tutaj „tekst” to tekst, który ma być wyśrodkowany. Jeśli w tym tekście znajdują się inne tagi, na przykład „p> / p>” przed akapitem, umieść tagi „na środku” poza istniejącymi tagami.

      center> h1> Witaj na mojej stronie / h1> / center> center> Rozgość się! / center>

  4. Sprawdź dokument HTML. Powinien wyglądać mniej więcej tak:

      ! DOCTYPE html> html> body> h1> center> Witaj na mojej stronie / centrum> / h1> centrum> Ułatw sobie! / Centrum> p1> Ta strona służy głównie do dostarczania informacji na różne tematy./p1> / body > / html>