Jak wyśrodkować div poziomo w CSS

W HTML Div jest niezbędnym elementem i jest nadmiernie używany w rozwoju stron internetowych. Jednak główną rzeczą jest to, jak skutecznie programista używa elementu DIV, aby spełnić swój cel; Jest prawidłowo ustawiony div? Czy to wymaga wyrównania środka? Są to powszechne pytania, które mogą zastanawiać się w umyśle programistów, gdy myślą o zwiększeniu wyglądu strony internetowej.

Ten post obejmie metodę środka wyrównania DIV w poziomie za pomocą CSS.

Jak wyśrodkować DIV w poziomie za pomocą CSS?

Aby wyśrodkować DIV w poziomie, sprawdzimy poniżej listy właściwości CSS:

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

Idźmy naprzód i zbadajmy wymienione właściwości jeden po drugim.

Metoda 1: Użyj właściwości marginesu, aby wyśrodkować DIV poziomo w CSS

W CSS „margines„Własność jest wykorzystywana do tworzenia przestrzeni wokół elementów HTML od górnej, dolnej, prawej lub lewej. Możemy również użyć właściwości marginesu do wyśrodkowania elementów, takich jak div.

Aby to zrobić, postępuj zgodnie z podanym przykładem.

Przykład - jak korzystać z wyściółki

Oto kontener naszej strony HTML i chcemy wyrównać go w środku w poziomie:

W naszym pliku CSS określamy „granica„Własność jako wartość”0.2EM Solid„Aby zobaczyć nasz element DIV, użyj„szerokość„Nieruchomość wzdłuż wartości„50%„Aby zastąpić domyślną szerokość naszej div. Na koniec ustaw „margines”Właściwość i określ jej wartość jako„automatyczny„Aby wyśrodkować DIV poziomo:

Poniższy obraz wskazuje, że pomyślnie wyrównaliśmy dodaną div w środku w poziomie:

Metoda 2: Użyj właściwości pozycji, aby wyśrodkować DIV poziomo w CSS

Aby ustawić pozycję różnych elementów HTML, „pozycja„Można zastosować własność CSS. Ta właściwość należy połączyć z „lewy„Nieruchomość, aby skoncentrować się w poziomie.

Spójrz na przykład, aby uzyskać lepsze zrozumienie.

Przykład

Aby stylizować nasz pojemnik, użyjemy „pozycja„Właściwość i ustal jej wartość jako„absolutny". Następnie określ „lewy„Własność o wartości”25%". Stworzy wolną przestrzeń po lewej stronie i wyrówna DIV do centrum:

Wyjście

Teraz sprawdźmy ostatnią metodę.

Metoda 3: Użyj właściwości wyświetlacza, aby wyśrodkować div poziomo w CSS

„„wyświetlacz”Właściwość kontroluje, w jaki sposób będzie się zachowywał wybrany element. Ta właściwość ma pewne główne wartości, które zapewniają różne funkcje, na przykład kiedy „przewód„Wartość jest używana z właściwością wyświetlacza, aby pudełko lub kontener był elastyczny. Ponadto możesz również skorzystać z właściwości wyświetlacza wraz z „Wyrównanie„Aby umieścić div w środku w poziomie.

Przykład

W naszym pliku HTML dodaliśmy znacznik z pewnym tekstem:

Centrowajmy ten div

Użyj „wyświetlacz„Nieruchomość z„przewód„Wartość, aby Div był elastyczny. Na koniec wyśrodkowamy DIV za pomocą „Wyrównanie„Właściwość i ustal jej wartość jako„Centrum”:

Wyjście

Opracowaliśmy najłatwiejsze metody wyśrodkowania DIV w CSS.

Wniosek

Aby wyśrodkować DIV poziomo, „wyświetlacz”,„pozycja", I "margines„Można zastosować właściwości CSS. Właściwość wyświetlacza musi być połączona z „Wyrównanie„Nieruchomość, a właściwość pozycji powinna być używana z„lewy„Nieruchomość, aby wyśrodkować DIV poziomo. Natomiast właściwość marginesu jest wystarczająca do umieszczenia div w środku w poziomie. W tym spisie omówiono różne metody centrum wyrównującego DIV w poziomie.