Jak w css wyśrodkować tekst?

Czas czytania: < 1 minuta

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.

2. 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.

3. 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.