W HTML pola wejściowe są używane do tworzenia formularzy. To pozwala uzyskać dane wejściowe od użytkownika, takie jak nazwa, adres i numer telefonu. W CSS możesz stylizować pola wejściowe na różne sposoby, takie jak zmiana koloru pola wejściowego, rozmiar, dodawanie granic i centrowanie. Mówiąc dokładniej, istnieją różne metody wyrównania pola wejściowego, w tym lewy, prawy, środek, góra i na dole.

W tym artykule dowiemy się, jak wyśrodkować pole wejściowe przy użyciu trzech różnych metod w CSS, które są:

• Wyśrodkuj pole wejściowe za pomocą „tekst-align"
• Wyśrodkuj pole wejściowe za pomocą „margines"
• Wyśrodkuj pole wejściowe za pomocą „siatka"

Aby wyrównać pole wejściowe w środku elementu HTML; Najpierw musisz nauczyć się metody utworzenia pola wejściowego, a następnie stylizować.

Zaczynajmy!

Jak utworzyć pole wejściowe w DIV za pomocą HTML?

W HTML utworzymy div i przypisamy klasę „div„Do tego i dodaj nagłówek

Wewnątrz tagu. Następnie utwórz Sub Div i przypisz nazwę klasy jako „wejście”I pole wejściowe w IT za pomocą znacznika; Ustaw typ pola wejściowego jako „tekst”, A w symbolu zastępczym dodaj tekst jako„Wchodzić Twoje imię". Dodane zniknie, gdy użytkownik wpisze coś w polu wejściowym

Html

Centralne pole wejściowe za pomocą Text-Alignign

W poniższym wyjściu widać, że pole wejściowe jest z powodzeniem tworzone w Div:

Następnie przejdź do CSS w celu stylizacji elementów HTML.

Jak stylizować div za pomocą CSS?

W pliku CSS użyj „.div„Aby uzyskać dostęp do DIV utworzonego w HTML. Następnie ustaw wysokość Div jako „250px”, Dodaj kolor tła jako„RGB (134, 240, 227)”I ustaw szerokość graniczną jako„10px”, Styl jako„grzbiet”, I kolor jako„RGB (2, 141, 127)".

CSS

.div
Wysokość: 250px;
Tło: RGB (134, 240, 227);
granica: 10px Ridge RGB (2, 141, 127);

Wyjście

Teraz sprawdzimy różne metody wyrównania pola wejściowego za pomocą CSS.

Metoda 1: Jak wyśrodkować pole wejściowe przy użyciu „Alignaj tekstu”?

Aby wyśrodkować pole wejściowe, użyjemy „tekst-align„Własność CSS. Jest wykorzystywany do ustawiania poziomego wyrównania tekstu w elementach HTML, takich jak lewy, prawy, środek i uzasadnienie.

Składnia

Składnia właściwości tekstowej jest:

Text-Align: lewy | prawy | środkowy | uzasadnij

Opis powyższej składni podano poniżej:

• lewy: Jest to domyślna wartość właściwości tekstu wykorzystywanego do ustawienia tekstu po lewej stronie elementu HTML.
• Prawidłowy: Służy do wyrównania tekstu po prawej stronie.
• Centrum: Określa wyrównanie środka tekstu.
• uzasadniać: Używając go, słowa są rozłożone na pełną linię.

Kontynuujmy przykład i wyrównaj pole wejściowe w środku Div.

Przykład

Tutaj użyjemy „.wejście„Aby uzyskać dostęp do Div, w którym tworzone jest pole wejściowe. Następnie ustawimy wartość właściwości tekstowej jako „Centrum„Aby wyśrodkować pole wejściowe:

.wejście
Text-Align: Center;

Poniższy obraz pokazuje, że pole wejściowe jest wyrównane w centrum Div:

Metoda 2: Jak wyśrodkować pole wejściowe za pomocą „marginesu”?

Aby utworzyć przejrzysty obszar wokół elementu, „margines„Zastosowana jest właściwość CSS. Ta właściwość pozwala ustawić margines elementu od lewej, prawej, górnej i dolnej strony. Jest to również właściwości krótko-marginesowe, margines, margines, prawej i margines. W jednym wierszu możesz ustawić wszystkie cztery wartości.

Składnia

Składnia właściwości marginesu podano poniżej:

Margines: Długość | Auto

„„długość" I "automatyczny”Są wartościami właściwości marginesu używanego dla:

• długość: Służy do ręcznego ustawiania marginesu.
• automatyczny: Pozwala przeglądarce samodzielnie ustawić margines wokół elementu.

Kontynuujmy przykład i wyśrodkuj pole wejściowe.

Przykład

Rozważ poprzedni przykład i zmień styl granicy za pomocą właściwości granicznej. Potem, w „wejście„Klasa, użyj właściwości marginesu, aby wyrównać pole wejściowe. Ustaw wartość marży jako „automatyczny”I wyświetl to jako„blok„Aby wyśrodkować pole wejściowe. Tutaj użyliśmy wartości właściwości wyświetlacza jako bloku, ponieważ pozwala ona na wyświetlanie elementu w bloku i zajmuje całą szerokość linii:

wejście
Margines: Auto;
Blok wyświetlacza;

Korzystając z powyższego kodu, uzyskano następujące dane wyjściowe:

Po pomyślnej wdrożeniu drugiej metody przejdziemy do trzeciej metody.

Metoda 3: Jak wyśrodkować pole wejściowe za pomocą „siatki”?

Aby wyśrodkować pole wejściowe, użyjemy właściwości wyświetlania i ustawimy jej wartości jako „siatka". Pozwala na wyświetlanie elementu w pojemniku siatkowym.

Składnia

Składnia właściwości wyświetlacza to:

Wyświetlacz: siatka;

Jako kontynuacja poprzedniego przykładu, Center wyrównaj pole wejściowe.

Przykład

Użyj ".wejście„Aby uzyskać dostęp do Div, w którym utworzone jest pole wejściowe i ustaw wartość właściwości wyświetlania jako„siatka„Aby ustawić go w pojemniku z siatką. Następnie ustaw pojemnik z siatką w „Centrum”Div, korzystając z właściwości Justify-Conent:

.wejście
Wyświetlacz: siatka;
Justify-Content: Center;

Dane wyjście oznacza, że ​​pole wejściowe jest wyrównane w środku Div:

Otóż ​​to! Wyjaśniliśmy metodę koncentracji pola wejściowego za pomocą CSS.

Wniosek

Pola wejściowe są umieszczone na środku div przy użyciu trzech różnych metod CSS, które są „siatka„Wartości właściwości wyświetlania,„tekst-align", I "margines" nieruchomości. Te właściwości pozwalają dostosować elementy zgodnie z Twoimi wymaganiami. W tym przewodniku omówiliśmy trzy metody dostosowania pola wejściowego w środku.