Twórcy stron internetowych polegają na nagłówkach, gdy chcą wyróżnić ważną sekcję tekstową na stronie internetowej. Nagłówki można wykorzystać do osiągnięcia różnych celów; Jednak główny cel pozostaje taki sam, a mianowicie podkreślenie ważnego tekstu lub oddzielenie sekcji od innego. Domyślnie nagłówki są wyrównane w lewo; Jednak, aby zwrócić uwagę odwiedzającego i uczynić go bardziej widocznym, możesz ustawić nagłówek na środku.

Ten przewodnik pokaże, jak wyśrodkować H1 w CSS.

Jak wyśrodkować H1 w CSS?

Aby wyśrodkować H1, użyjemy następujących właściwości CSS:

• Własność tekstu
• Wyświetlaj właściwość
• właściwość pozycji

Zacznijmy od Method One!

Metoda 1: Użyj właściwości tekstu tekstowego do wyśrodkowania H1 w CSS

W CSS „tekst-align„Właściwość jest wykorzystywana do ustawienia tekstu elementów HTML w lewo, środku lub prawej poziomej. Zasadniczo możemy powiedzieć, że ta właściwość jest bardzo przydatna do wyrównania tekstu.

Tutaj spójrz na poniższy przykład, aby zrozumieć, jak działa właściwość tekstu tekstu.

Przykład

Mamy przesłuchanie na stronie internetowej, obecnie domyślnie wyrównane z lewą stroną. Zajmijmy się tym w centrum:

W pliku HTML ustaw

Zagaduj w sekcji ciała i dodaj do niego trochę tekstu.

Html

Mój nagłówek

W pliku CSS wykorzystamy „tekst-align”Właściwość i ustawiaj swoją wartość na„Centrum". To dostosuje nagłówek H1 do centrum.

CSS

H1
Text-Align: Center;

Zapisz kod i otwórz go w przeglądarce:

Jak widać, z powodzeniem wyśrodkowaliśmy H1 za pomocą właściwości CSS tekstu tekstowego.

Metoda 2: Użyj właściwości wyświetlacza do wyśrodkowania H1 w CSS

Jeśli chodzi o definiowanie zachowania elementu HTML, „wyświetlacz„Własność jest używana. Ta właściwość ma kilka przydatnych wartości, takich jak Flex i Block. Ponadto elastyczne zachowanie elementów jest wynikiem wartości elastycznej, a zachowanie blokowe elementów jest wynikiem wartości blokowej.

Przykład

Po pierwsze, określ „wyświetlacz„Własność i jej wartość do„przewód". To sprawi, że element nagłówka będzie elastyczny. W następnym kroku użyj „justify-content„Własność o wartości”Centrum„Aby ustawić nagłówek na środku.

CSS

H1
Wyświetlacz: Flex;
Justify-Content: Center;

Wyjście

Nagłówek H1 jest pomyślnie wyrównany do centrum.

Metoda 3: Użyj właściwości pozycji do wyśrodkowania H1 w CSS

Ten "pozycja„Własność jest oczywista; decyduje, w jaki sposób element HTML zostanie umieszczony w pewnej pozycji. Połączenie tej właściwości z innymi właściwościami CSS spowoduje osiągnięcie pożądanego celu, który ustawia nagłówek H1 w CSS.

Przykład

Aby wyśrodkować H1, „pozycja„Własność można wykorzystać z wartością”względny". To zmieni normalną pozycję elementu. Teraz użyj „lewy„Własność i ustawiaj swoją wartość na„40%„Aby stworzyć przestrzeń z lewej strony, a nasz nagłówek zostanie wyrównany do centrum.

CSS

H1
Pozycja: względny;
Po lewej: 40%;

Wyjście

Wyjaśniliśmy najłatwiejsze metody wyśrodkowania H1 w CSS.

Wniosek

Aby wyśrodkować H1, CSS ”tekst-align”,„wyświetlacz", Lub "pozycja„Można zastosować właściwości. Do wspomnianego celu właściwość tekstu tekstowego zostanie użyta z „Centrum”Właściwość wyświetlacza będzie używana z„przewód„Wartość, a my ustawimy wartość właściwości pozycji”względny„Aby uzyskać pożądany wynik. Ten artykuł obejmował, jak wyśrodkować H1 przy użyciu różnych właściwości CSS.