Jak w css wyśrodkować tekst?

Jak w css wyśrodkować tekst?

2023-02-10 0 przez redakcja

Wyśrodkowanie tekstu w CSS jest bardzo ważną częścią projektowania stron internetowych i aplikacji. Istnieje kilka różnych sposobów wyśrodkowania tekstu w CSS, w zależności od potrzeb i wymagań projektu. Oto kilka przykładów jak wyśrodkować tekst w CSS:

  1. Wyśrodkowanie tekstu za pomocą właściwości CSS “text-align”, skopiuj tekst normalnie zaznaczając lub kliknij dwa razy szybko:
.center-text {
   text-align: center;
}

W powyższym przykładzie, wszystki elementy z klasą “center-text” będą wyśrodkowane na stronie. Właściwość text-align jest bardzo prosta w użyciu i można ją łatwo zastosować do każdego elementu HTML.

  1. Wyśrodkowanie tekstu za pomocą właściwości CSS “margin”:
.center-text {
   width: 50%;
   margin: 0 auto;
}

W powyższym przykładzie, element z klasą “center-text” będzie miał szerokość 50% i będzie wyśrodkowany dzięki właściwości “margin: 0 auto”. Wartość “0 auto” powoduje, że marginesy z lewej i prawej strony będą takie same, co spowoduje, że element zostanie wyśrodkowany na stronie.

  1. Wyśrodkowanie tekstu za pomocą właściwości CSS “display: flex”:
.center-text {
   display: flex;
   align-items: center;
   justify-content: center;
}

W powyższym przykładzie, element z klasą “center-text” będzie wyśrodkowany za pomocą właściwości display: flex, align-items: center i justify-content: center. Właściwość display: flex pozwala na użycie właściwości align-items i justify-content do wyśrodkowania elementów wewnątrz.

Udostępnij treści przy pomocy: