regulaminem na stronie jest często niezbędne do wyrównania Centrum CSS-sposób: na przykład, do centrum jednostki głównej.Istnieje kilka rozwiązań tego problemu, z których każdy prędzej czy później trzeba użyć dowolnego kodera.
wyrównać tekst wyśrodkowany
często w celach dekoracyjnych chcesz ustawić wyrównanie tekstu w centrum, CSS, w tym przypadku, skraca czas wprowadzenia.Wcześniej to było zrobione za pomocą atrybutów HTML teraz standard wymaga Wyrównywanie tekstu za pomocą arkuszy stylów.W przeciwieństwie do bloku, dla którego chcesz zmienić marginesy zewnętrzne, z wyrównania tekstu CSS w środku jest z jednej linii:
- text-align: center;Nieruchomość
To jest dziedziczona i przekazywana z rodzica na wszystkich dzieci.To ma wpływ nie tylko tekst, lecz również do innych elementów.Aby to zrobić, muszą być pisane małymi literami (na przykład, przęsła) lub line-bloku (wszystkie bloki, które ustawia wyświetlanie właściwości: blok).Ta druga opcja pozwala również zmienić szerokość i wysokość bardziej elastycznej konfiguracji wcięcia.
Często wyrównanie stron atrybut do samego znacznika.Ten natychmiast czyni kod nieważne jak W3C przyznał atrybut align nieaktualne.Jego stosowanie nie jest zalecane na stronie.
wyrównanie bloku w centrum
Jeśli chcesz określić wyrównanie centrum div, CSS może zaoferować dość prosty sposób: użycie zewnętrznego marginesu wcięcia.Wypełnienie może być ustawiona jako elementy blokowe i line-bloku.Svoysva wartość powinna być ustawiona na 0 (wcięty w pionie) i Auto (automatyczna tiret poziome):
- margin: 0 auto;
Teraz opcja ta jest uznawana za absolutnie ważne.Korzystanie z zewnętrznego wyściółka pozwala także określić wyrównanie centrum: właściwości CSS-marża pozwala rozwiązać wiele problemów związanych z elementu pozycjonującego na stronie.Blok
Wyrównaj na lewej lub prawej krawędzi
Czasami wyrównanie Centrum CSS-way nie jest wymagane, ale jest to konieczne, aby umieścić dwie jednostki obok jednego z lewej strony, a drugi - z prawej.Na tej nieruchomości znajduje się pływak, który może przyjąć jedną z trzech wartości: w lewo, w prawo, lub żadnego.Powiedzmy, że masz dwie jednostki, które muszą być razem.Następnie kod będzie:
- .left {float: left;}
- .right {float: right}
Jeśli istnieje trzecia jednostka, która musi być umieszczona w ramach pierwszych dwóch bloków (np, stopka), żenależy zarejestrować własności jasne:
- .left {float: left;}
- .right {float: right}
- stopka {clear: both}
fakt, że bloki z lewej klas i prawej upadku z ogólnejprzepływu, czyli wszystkie inne elementy ignorowane istnieniu elementów wyrównane.Właściwość clear: both pozwala stopki lub innego urządzenia do patrz spadł z elementów przepływowych i zakazuje zawijania (float) na lewej i prawej.W związku z tym, w naszym przykładzie, stopka przesunie w dół.Wyrównanie
pionie
Istnieją przypadki, w których wyrównanie niewystarczające Centrum zestaw CSS-ways, należy jeszcze zmienić pozycję pionową bloku dziecka.Każdy element linii lub linii bloku mogą być dociskane do górnej lub dolnej krawędzi, znajduje się w środku elementu nadrzędnego, lub być w dowolnym miejscu.Częściej wymagają wyrównania pola w centrum, ten atrybut jest stosowany vertical-align.Załóżmy, że istnieją dwa zespoły, jeden wewnątrz drugiego.Jednostka wewnętrzna - Element line-block (display: inline-block).Konieczne jest dostosowanie urządzenia w pionie dziecko: wyrównanie
- na górnej granicy - .child {vertical-align: top};Centrum
- wyrównanie - .child {vertical-align: middle};Wyrównanie
- w dolnej - .child {vertical-align: bottom;}
na elementy blokowe lub text-align lub vertical-align ma zastosowania.
Możliwe problemy z jednostkami wyrównane
div alignCzasami centrum CSS-sposób może powodować drobne problemy.Na przykład, za pomocą pływaka, na przykład, istnieją trzy bloki: .first, .second i .third.Drugie i trzecie bloków jest w pierwszym.Element z klasą drugiego bloku lewej wyrównany, a ostatni - po prawej stronie.Po ustawieniu dwóch wypadł strumienia.Jeśli rodzic nie jest określona wysokość (np 30em), nie będzie już rozciągnąć wysokość jednostek zależnych.Aby uniknąć tego błędu, należy użyć "spacer" - specjalną jednostkę, która widzi .second i .third.CSS-kod:
- .second {float: left}
- .third {float: right}
- .clearfix {height: 0;clear: both;}
często używane pseudo: po, co pozwala także na powrót do bloków na miejsce, tworząc psevdorasporki (w tym przykładzie w div z klasy pojemnika leży w .first i zawiera .left i .right):
- .w lewo {pływaka: po lewej}
- .right {float: right}
- .container: po {content: "';Wyświetlacz: Stół;clear: both;}
powyżej opcji - najczęściej, choć istnieją pewne różnice.Zawsze można znaleźć najprostszy i najwygodniejszy sposób tworzenia psevdorasporki przez eksperymenty.
Innym problemem często spotykane układ - wyrównanie elementów line-bloku.Po każdej z nich automatycznie dodaje przestrzeni.Aby poradzić sobie z tym właściwości marginesu pomoc, która jest określona przez ujemną wgłębienia.Istnieją inne sposoby, które są stosowane rzadziej, na przykład kasujące rozmiaru czcionki.W tym przypadku, właściwości macierzystego określone czcionki wielkości: 0.Jeśli znajduje się w blokach tekstu, właściwości pierwiastków bloku liniowego powróciły do pożądanej wielkości.Na przykład, font-size: 1em.Metoda nie zawsze jest wygodne, więc znacznie częściej wykorzystywane opcję z marginesów zewnętrznych.
bloku ustawienie pozwala stworzyć piękny i funkcjonalny układ strony i to jest ogólny układ i rozmieszczenie towarów w sklepach, a zdjęcia na małej stronie.
