Jak mogę wyśrodkować tekst wewnątrz div

Podczas projektowania stron internetowych programiści mogą dodawać różne komponenty, w tym obrazy, tekst, tabele i inne. Ponadto tekst może być wyrównany w środku w div przy użyciu wielu właściwości CSS. Najpopularniejszą metodą tekstu koncentrującego się na poziomie jest wykorzystanie „tekst-align" atrybut. Ponadto możesz również użyć „Wysokość linii" I "Pion-align”Atrybuty do pionowego wyrównania tekstu.

Ten post przedstawi metodę koncentracji tekstu w pionie, a także poziomo w Div.:

Jak wyśrodkować tekst poziomo w div?

Aby wyśrodkować tekst poziomo w div, sprawdź podaną procedurę.

Krok 1: Zrób kontener DIV

Początkowo stwórz kontener DIV za pomocą „" element. Następnie wstaw „„ID”Atrybut wewnątrz znacznika otwierającego div. Następnie osadziłem trochę tekstu między tagiem DIV:

Linuxhint to jedna z najlepszych stron internetowych do tworzenia treści.

Wyjście

Krok 2: Uzyskaj dostęp do kontenera Div do Center Align Tekst

Teraz uzyskaj dostęp do kontenera Div za pomocą „ID”Nazwa atrybutu z selektorem„#”I zastosuj następujące właściwości CSS:

#Align-Content
Szerokość: 80%;
Margines: 0 Auto;
Wyściółka: 20px;
Tło: #C8EDF3;
Text-Align: Center;
Kolor: RGB (49, 15, 240);

Tutaj:

• • "szerokość„Właściwość jest wykorzystywana do ustawiania szerokości wielkości pojemnika.
  • "margines”Określa pustą przestrzeń poza pojemnikiem.
  • "wyściółka”Definiuje przestrzeń wewnątrz granicy elementu.
  • "tło”Ustawia kolor tła z tyłu elementu.
  • "tekst-align„Własność jest wykorzystywana do ustawiania wyrównania tekstu jako„Centrum".
  • "kolor”Określa kolor tekstu wewnątrz granicy.

Można zauważyć, że pomyślnie wyśrodkowaliśmy wyrównany tekst w poziomie wewnątrz utworzonego div:

Jak wyśrodkować tekst pionowo w div?

Aby wyśrodkować tekst pionowo w pojemniku Div, postępuj zgodnie z podanymi instrukcjami.

Krok 1: Uzyskaj dostęp do kontenera Div

Po pierwsze, uzyskaj dostęp do utworzonego kontenera Div.

Krok 2: Zastosuj właściwości CSS do tekstu środkowego pionowo

Następnie zastosuj poniższe wymienione właściwości CSS do środka tekstowego pionowo w DIV:

#Align-Content
Wyświetlacz: komórek stołowy;
szerokość: 300px;
Wysokość: 150px;
Wyściółka: 10px;
kolor niebieski;
kolor tła: RGB (248, 215, 166);
Border: 3px przerywany #F09d03;
Pion-align: środkowy;

Zgodnie z powyższym fragmentem kodu:

• • Ustaw "wyświetlacz„To określa zachowanie wyświetlania elementu jako„Komórka stołowa”, Co oznacza, że ​​działa jak komórka tabeli w elemencie div.
  • "szerokość„Właściwość określa rozmiar szerokości elementu.
  • "wysokość”Ustawia wysokość elementu.
  • "wyściółka”Definiuje pustą przestrzeń wewnątrz elementu.
  • "kolor”Jest wykorzystywany do ustawiania koloru tekstu wewnątrz elementu.
  • "kolor tła”Określa kolor tylnej części elementu.
  • "granica„Właściwość definiuje granicę elementu.
  • "Pion-align„Własność jest wykorzystywana do ustawiania pionowego wyrównania zdefiniowanego elementu w„środek".

Wyjście

Dowiedziałeś się o pełnej procedurze wyśrodkowania tekstu wewnątrz pojemnika na dwa sposoby, pionowo i poziomo.

Wniosek

Aby wyśrodkować tekst pionowo i poziomo wewnątrz div, najpierw utwórz kontener DIV za pomocą elementu i uzyskać dostęp do niego, wykorzystując selektor. Następnie zastosuj właściwości CSS, w których „tekst-align„Nieruchomość jest wykorzystywana do wyrównania poziomego i”Pion-align”Ustawia wyrównanie pionowe. Ten post wykazał metody koncentracji tekstu pionowo i poziomo wewnątrz Div.