![CSS Center text Horizontal and Vertical](https://i.ytimg.com/vi/WsspKNtaCIg/hqdefault.jpg)
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
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>
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 {}
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>
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>
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>
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
- 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.
Znajdź tekst, który chcesz wyśrodkować. Przewiń dokument w dół, aż znajdziesz tytuł, akapit lub inny tekst, który chcesz wyśrodkować.
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>
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>