Umieszczenie elementów na stronie internetowej ma zasadnicze znaczenie dla ogólnego projektu. Chociaż istnieją inne sposoby wpływania na układ, takie jak używanie tabel (których nie zalecamy), najlepiej jest używać CSS.
Poniżej omówimy, jak użyć prostej właściwości w stylu CSS, aby wyrównać obrazy, tabele, akapity i więcej.
Uwaga: Te same metody można stosować również w zewnętrznych arkuszach stylów, ale ponieważ odnoszą się one do poszczególnych elementów i prawdopodobnie muszą pozostać w ten sposób, najlepiej jest stosować stylizację w linii, tak jak to opisano poniżej.
Wyrównaj akapity tekstu
Tag akapitu jest pierwszym miejscem do rozpoczęcia tworzenia strony internetowej. Tagi otwierające i zamykające wyglądają tak:
Domyślne wyrównanie tekstu w akapicie jest po lewej stronie strony, ale możesz także wyrównać akapity do prawej i do środka.
Użycie właściwości float umożliwia wyrównanie akapitów do prawej lub lewej strony elementu nadrzędnego. Wszelkie inne elementy wewnątrz tego elementu nadrzędnego będą przepływać wokół elementu pływającego.
Aby uzyskać najlepszy efekt za pomocą akapitu, najlepiej ustawić szerokość akapitu, który jest mniejszy niż element kontenera (nadrzędny).
Wyrównaj tekst wewnątrz akapitów
Prawdopodobnie najciekawszym wyrównaniem tekstu akapitu jest "uzasadnić", co oznacza, że przeglądarka wyświetla tekst wyrównany, zasadniczo, do prawej i lewej strony okna.
Aby uzasadnić tekst w akapicie, należy użyć właściwości text-align.
Możesz także wyrównać cały tekst wewnątrz akapitu po prawej lub lewej stronie (domyślnie), używając właściwości text-align.
Właściwość text-align wyrówna tekst wewnątrz elementu. Z technicznego punktu widzenia nie powinno się dopasowywać obrazów zawartych w akapicie lub innym elemencie, ale większość przeglądarek traktuje obrazy jako wbudowane w tę właściwość.
Wyrównanie obrazów
Korzystając z właściwości float na znaczniku obrazu, można zdefiniować rozmieszczenie obrazów na stronie i sposób, w jaki tekst zawija się wokół nich.
Podobnie jak powyższe akapity, właściwość stylu pływającego w tagu obrazu umieści twój obraz na stronie i powie przeglądarce, jak przepływać tekst i inne elementy wokół tego obrazu.
Tekst następujący po powyższym tagu graficznym przepłynie wokół obrazu w prawo, gdy obraz zostanie wyświetlony po lewej stronie ekranu.
Jeśli chcę, aby tekst przestał owijać wokół obrazu, używam tej właściwości:
Dopasowywanie więcej niż akapitów
Co jednak zrobić, jeśli chcesz wyrównać więcej niż tylko akapit lub obraz? Możesz po prostu umieścić właściwość stylu w każdym akapicie, ale jest tag, którego możesz użyć, który jest bardziej skuteczny:
Po prostu otaczaj tekst i obrazy (w tym znaczniki HTML) tagiem i właściwością stylu (float lub text-align), a wszystko w tym dziale będzie wyrównane w zależności od tego, jak chcesz.
Należy pamiętać, że wyrównania dodawane do akapitów lub obrazów w ramach podziału będą honorowane, zastępując znacznik.
