Dziś odcinek dla wymagających. I to podwójnie, a nawet potrójnie będą spełnione ich oczekiwania, bo oprócz osiągnięcia dwóch korzyści jednym rozwiązaniem, takowe będzie przedstawione w wyjątkowo krótki sposób. Wyrównanie zmiennym jest! Właśnie o tym, bez sztywniactwa, zaraz pogadamy.
Nie bądź sztywniak.
Chcąc wyrównać tekst mamy kilka możliwości, co wydaje się, że zapewnia nam różnorodność, ale możemy użyć i tak jednego typu wyrównania dla wybranego fragmentu. Czyli możemy ustawić właściwość text-align na 4 interesujące nas wartości: left, center, right oraz justify. Ale jak już wspomniałem, to nie jest wyjście, które zawsze nas zadowala. Wielolinijkowy tekst najlepiej wygląda wyrównany do lewej lub wyjustowany, ale krótki czasem lepiej wyśrodkowany. Za przykład może posłużyć podpis pod zdjęciem.
figcaption{
text-align: center;
}
+
<figure>
<img src="mario-1557240_640.jpg" alt="Super Mario Bros"/>
<figcaption>Tu podpis. Długi lub krótki.</figcaption>
</figure>
Klikając na zdjęcie widzisz, że zmienia się podpis. Ale niestety ustawiona na sztywno właściwość text-align:center wcale nie daje dobrego efektu.
Czy jest możliwe z użyciem tylko i wyłącznie CSS spowodować, aby tekst, który przekracza linijkę automatycznie równał do lewej, a krótki pozostawał wycentrowany? No pewnie!
Rozwiązanie jest dosyć proste. Owijamy nasz tekst w SPAN. Ustawiamy mu wyświetlanie inline-block oraz wyrównanie tekstu do... lewej. Tu również możesz poklikać w dowolny fragment przykładu.
figcaption{
text-align: center;
}
figcaption span{
display: inline-block;
text-align: left;
}
+
<figure>
<img src="mario-1557240_640.jpg" alt="Super Mario Bros"/>
<figcaption><span>Tu podpis. Długi lub krótki.</span></figcaption>
</figure>
Ponieważ FIGCAPTION nadal ma wyrównanie do środka, to SPAN jako całość jest wycentrowany. Ale jako całość, bo już sam tekst w nim jest równany do lewej. Jeśli więc mamy krótki tekst, to box elementu SPAN (który uzyskalismy dzięki display:inline-block) środkuje się w wolnej przestrzeni FIGCAPTION. Nie interesuje nas wyrównanie w samym SPAN, bo tekst i tak się rozpycha na cały jego box. Jeśli natomiast tekst przekracza jedną linijkę, to box SPAN zajmuje 100% szerokości FIGCAPTION. W sumie też jest wyśrodkowany, ale przestrzenie z lewej i prawej mają po 0px. A tekst w samym SPAN jest nadal wyrównany do lewej, ale tym razem już to jest zauważalne. Oczywiście metodę możesz stosować również poza FIGCAPTION.
Mam nadzieję, że wymagający czują się ustatysfakcjonowani. Do przeczytania!