Centered: CSS-układ

Gdy układ strony jest często konieczne, aby wyśrodkowany CSS sposób: na przykład do centrum jednostkę główną. Istnieje kilka rozwiązań tego problemu, z których każdy prędzej czy później musiał użyć dowolnego kodera.

Wyrównaj tekst do centrum

Często w celach dekoracyjnych chcesz ustawić tekst wyśrodkowany, CSS, w tym przypadku, w celu zmniejszenia czasu nałożenia. Poprzednio było to zrobić za pomocą HTML-atrybuty, ale teraz średnia wymagana, aby wyrównać tekst z arkusza stylów. W przeciwieństwie do bloku, dla którego chcesz zmienić dopełnienie zewnętrznego w dostosowywaniu CSS tekstu w środku jest wykonany z jednej linii:

• text-align: center;

Ta właściwość jest dziedziczona i przekazywane z rodziców na wszystkich dzieci. Wpływa nie tylko tekst, ale również do innych elementów. W tym celu, należy je małe litery (na przykład okres), albo rząd blok (każdy z bloków, które określają właściwości wyświetlania: Blok). Ta ostatnia opcja pozwala również zmienić szerokość i wysokość elementu, bardziej elastyczną konfigurację wcięcia.

stron często do siebie wyrównać atrybutu tag. Ten natychmiast sprawia, że kod niepoprawny, ponieważ W3C potwierdzony atrybut align nieaktualne. Używanie go na stronie nie jest zalecane.

wyśrodkowany blok

Jeśli chcesz ustawić wyrównanie div w środku, CSS może zaoferować całkiem wygodny sposób: użycie zewnętrznego marginesu dopełnienia. Wyściółka może być określony jako elementy blokowe i linii bloku. Wartość Svoysva powinno być 0 (pionowe wypełnienie) i automatycznego (automatyczne wcięcie poziomo)

• margin: 0 auto;

Teraz ta opcja jest uznawane za absolutnie poprawny. Korzystanie z zewnętrznego wyściółka pozwala także ustawić wyrównanie centrum: własność CSS margines pozwala nam rozwiązać wiele problemów związanych z elementu pozycjonującego na stronie.

Wyrównanie lewej lub prawej krawędzi bloku

Czasami CSS sposób nie wymaga wyrównania centrum, ale jest to konieczne, aby umieścić kolejne dwa bloki, jeden z lewej strony, a drugi – z prawej strony. Do tego istnieje właściwość float, który może przyjąć jedną z trzech wartości: lewy, prawy lub żaden. Powiedzmy, że masz dwa bloki, które powinny być umieszczone obok siebie. Następnie kod jest w następujący sposób:

• .left {pływak: lewy;}
• .right {float: right}

Jeśli nie ma trzeciego bloku, które muszą znajdować się w pierwszych dwóch bloków (na przykład stopki), to konieczne jest, aby zarejestrować wyraźną cechę:

• .left {pływak: lewy;}
• .right {float: right}
• stopka {clear: both}

Fakt, że bloki z klasami lewej i prawej wypaść z całkowitego strumienia, czyli wszystkie pozostałe elementy ignorowane samo istnienie elementów wyrównane. Właściwość clear: both pozwala blok stopki lub jakikolwiek inny widoczny wytrąca się z komórek przepływu i zakazuje zawijania (float) na lewej i prawej. Zatem w naszym przykładzie stopka jest przesunięty w dół.

pionowe wyrównanie

Istnieją przypadki, w których nie wystarczy ustawić wyrównanie środku CSS sposobów, należy także zmienić pozycję pionową bloku dziecka. Każdy element liniowy lub wiersz blok może być dociskana do górnej i dolnej krawędzi, znajduje się w środku elementu nadrzędnego lub znajdować się w dowolnym miejscu. Najczęściej wymagają wyrównania na środku bloku, wykorzystuje atrybut vertical-align. Załóżmy, że istnieją dwa bloki, jeden zagnieżdżone wewnątrz drugiej. W tym wewnątrz urządzenia – element rzędu bloku (wskazanie inline blokowy). Jest to konieczne, aby wyrównać pionowy blok dziecko:

• ustawienie górnej granicy – {pionowa .child Wyrównanie: góra};
• wyśrodkowany – {pionowa .child Wyrównanie: środek};
• ustawienia dolnego brzegu – .child {pionowa wyrównać: dolny};

W elementach blokowych dźwięku text-align lub vertical-align nie ma zastosowania.

Możliwe problemy z jednostkami wyrównane

Czasami div align środek CSS drogi może spowodować trochę kłopotów. Na przykład, przy użyciu pacy: na przykład, istnieją trzy bloki: .first, .second i .third. Drugi i trzeci bloki leżą w pierwszym. Element z klasą drugi wyrównany do lewej, a ostatni blok – po prawej stronie. Po ustawieniu dwóch spadła ze strumienia. Jeżeli element nadrzędny nie jest określona wysokość (np 30em), to przestaje rozciągnąć wysokość jednostek pomocniczych. Aby uniknąć tego błędu, należy użyć „spacer” – specjalną jednostkę, która widzi .second i .third. CSS-code:

• .second {float: lewy}
• .third {float: right}
• .clearfix {wysokość: 0; jasne: zarówno;}

Pseudo często stosowane Po, co pozwala także na powrót bloki na miejscu tworząc psevdorasporki (na przykład w div z klasy leży wewnątrz pojemnika i zawiera .first .left i .right)

• .left {pływak: lewy}
• .right {float: right}
• .container Po {treści: ''; display: table; jasne: zarówno;}

Powyższe opcje – najczęściej, chociaż istnieją pewne różnice. Zawsze można znaleźć najprostszy i najwygodniejszy sposób na tworzenie psevdorasporki przez eksperymenty.

Innym problemem często spotykanym układ – wyrównanie elementów line-blokowych. Po każdym z nich znajduje się przestrzeń dodawane automatycznie. Uchwyt pomaga właściwość margines, który jest zdefiniowany przez ujemną wcięcia. Istnieją inne sposoby, które są wykorzystywane rzadziej, na przykład, Reset rozmiaru czcionki. W tym przypadku, własności elementu nadrzędnego rejestruje rozmiar czcionki: 0. Jeżeli znajduje się w blokach tekstu, właściwości elementów liniowe blokowe powróciły do pożądanego rozmiaru czcionki. Na przykład, rozmiar czcionki: 1 em. Metoda ta nie zawsze jest wygodne, więc jest znacznie bardziej powszechnie stosowane wersji z marginesów zewnętrznych.

Wyrównywanie Blocks pozwala tworzyć piękne i funkcjonalne strony: ogólny układ i układ i rozmieszczenie towarów w sklepach i zdjęcia na miejscu mała.