Podczas układania strony często konieczne jest wykonanie wyśrodkowania za pomocą metody CSS: na przykład wycentrowanie głównego bloku. Istnieje kilka opcji rozwiązania tego problemu, z których każda prędzej czy później musi zostać wykorzystana przez dowolnego projektanta układu.
Często w celach dekoracyjnych konieczne jest wyśrodkowanie tekstu; CSS w tym przypadku pozwala skrócić czas tworzenia układu. Poprzednio robiono to za pomocą atrybutów HTML, ale obecnie standard wymaga wyrównywania tekstu za pomocą arkuszy stylów. W odróżnieniu od bloków, dla których należy zmienić marginesy, w CSS centrowanie tekstu odbywa się za pomocą pojedynczej linii:
Majątek ten jest dziedziczony i przekazywany z rodziców na wszystkich zstępnych. Wpływa nie tylko na tekst, ale także na inne elementy. Aby to zrobić, muszą być inline (na przykład span) lub inline-block (dowolne bloki, które mają ustawioną właściwość display: block). Ta ostatnia opcja pozwala także na zmianę szerokości i wysokości elementu oraz bardziej elastyczne dopasowanie wcięć.
Często na stronach wyrównanie jest przypisane do samego znacznika. To natychmiast unieważnia kod, ponieważ W3C wycofało atrybut wyrównania. Nie zaleca się używania go na stronie.
Jeśli chcesz wyśrodkować element div, CSS może zaoferować całkiem sporo wygodnym sposobem: użyj marginesów zewnętrznych. Wcięcia można ustawić zarówno dla elementów blokowych, jak i elementów blokowych wbudowanych. Wartość właściwości powinna wynosić 0 (dopełnienie w pionie) i auto (automatyczne dopełnienie w poziomie):
Teraz ta opcja jest uznawana za absolutnie ważną. Użycie zewnętrznego dopełnienia pozwala także ustawić wyśrodkowanie obrazu: pozwala to rozwiązać wiele problemów związanych z pozycjonowaniem elementu na stronie.
Czasami wyrównanie do środka CSS nie jest wymagane, ale trzeba umieścić dwa bloki obok siebie: jeden na lewej krawędzi, drugi na prawej. W tym celu dostępna jest właściwość float, która może przyjmować jedną z trzech wartości: lewą, prawą lub brak. Załóżmy, że masz dwa bloki, które należy umieścić obok siebie. Wtedy kod będzie taki:
Jeżeli istnieje jeszcze trzeci blok, który powinien znajdować się pod dwoma pierwszymi blokami (np. stopka), to należy mu nadać właściwość clear:
Chodzi o to, że wypadają bloki z klasami po lewej i prawej stronie całkowity przepływ, to znaczy, że wszystkie inne elementy ignorują samo istnienie wyrównanych elementów. Właściwość clear:obie pozwala stopce lub dowolnemu innemu blokowi zobaczyć elementy, które wypadły z przepływu i zabrania pływania zarówno po lewej, jak i po prawej stronie. Dlatego w naszym przykładzie stopka przesunie się w dół.
Są chwile, kiedy nie wystarczy ustawić wyrównanie do środka za pomocą metod CSS; trzeba także zmienić położenie pionowe bloku podrzędnego. Dowolna mała litera lub małe litery element blokowy można zagnieżdżać przy górnej lub dolnej krawędzi, pośrodku elementu nadrzędnego lub w dowolnym miejscu. Najczęściej blok musi być wyrównany do środka, w tym celu używany jest atrybut Vertical-align. Powiedzmy, że są dwa bloki, jeden zagnieżdżony w drugim. W tym przypadku blok wewnętrzny jest elementem typu inline-block (wyświetlacz: inline-block). Musisz wyrównać blok podrzędny w pionie:
Ani wyrównanie tekstu, ani wyrównanie do pionu nie wpływają na elementy blokowe.
Czasami wyśrodkowanie elementu div za pomocą CSS może powodować pewne problemy. Na przykład, używając float: załóżmy, że są trzy bloki: .first, .drugi i .three. Drugi i trzeci blok leżą w pierwszym. Element z drugą klasą jest wyrównany do lewej, a ostatni blok do prawej. Po wyrównaniu oba wypadły z przepływu. Jeśli element nadrzędny nie ma ustawionej wysokości (na przykład 30em), wówczas nie będzie już rozciągał się do wysokości swoich bloków podrzędnych. Aby uniknąć tego błędu, użyj „spacji” - specjalnego bloku, w którym widać .drugi i .trzeci. Kod CSS:
Często używana jest pseudoklasa:after, która pozwala również na przywrócenie bloków na ich miejsce poprzez utworzenie pseudoodstępu (w przykładzie element div z klasą kontenera leży wewnątrz.pierwszy i zawiera.left i.right) :
Powyższe opcje są najczęstsze, chociaż istnieje kilka odmian. Zawsze możesz znaleźć najprostszy i najwygodniejszy sposób na utworzenie pseudo-przełącznika poprzez eksperymenty.
Innym problemem, z którym często spotykają się projektanci układów, jest wyrównanie elementów bloków śródliniowych. Po każdym z nich automatycznie dodawana jest spacja. Właściwość marginesu, która jest ustawiona na wcięcie ujemne, pomaga sobie z tym poradzić. Istnieją inne metody, które są stosowane znacznie rzadziej, np. zerowanie.W tym przypadku we właściwościach elementu nadrzędnego zapisywany jest rozmiar czcionki: 0. Jeśli wewnątrz bloków znajduje się tekst, wymagany rozmiar czcionki jest już zwracany we właściwościach elementów bloku inline. Na przykład rozmiar czcionki:1em. Ta metoda nie zawsze jest wygodna, dlatego znacznie częściej stosuje się opcję z wcięciami zewnętrznymi.
Wyrównywanie bloków pozwala na tworzenie pięknych i funkcjonalnych stron: dotyczy to układu ogólnego układu, rozmieszczenia produktów w sklepach internetowych i zdjęć na wizytówce internetowej.
Projektanci stron internetowych na co dzień używają DIV w swojej pracy. Bez wątpienia jest to najpopularniejszy tag. Otwórz źródło dowolnej witryny internetowej, a zobaczysz, że większość, jeśli nie dwie trzecie obiektów jest ujęta w nią
Nazwa elementu pochodzi od angielskiego słowa Division, które oznacza dzielenie. Podczas zapisywania znaczników służy do dzielenia elementów na bloki. Elementy DIV obejmują grupy treści na stronie internetowej. Na przykład obrazy, akapity z tekstem. Tag nie wpływa w żaden sposób na wyświetlanie treści i nie niesie żadnego obciążenia semantycznego.
DIV obsługuje wszystkie atrybuty globalne. Ale do projektowania stron internetowych potrzebujesz tylko dwóch - klasy i identyfikatora. O wszystkich innych będziesz pamiętać tylko w egzotycznych przypadkach, a to nie jest fakt. Atrybut wyrównania, który był używany do wyśrodkowania lub wyrównywania elementów div do lewej, stał się przestarzały.
Wyobraź sobie, że witryna jest lodówką, a DIV to plastikowe pojemniki, do których należy posortować zawartość. Nie włożyłbyś owoców do tego samego pojemnika z pasztetem. Każdy rodzaj produktu umieścisz osobno. Treści internetowe są generowane w podobny sposób.
Otwórz dowolną stronę internetową i podziel ją na znaczące bloki. Nagłówek u góry, stopka u dołu, tekst główny pośrodku. Z boku zazwyczaj znajduje się mniejsza kolumna z treścią reklamową lub chmurą tagów.
Teraz spójrz na każdą sekcję bardziej szczegółowo. Zacznij od nagłówka. Nagłówek strony posiada osobne logo, nawigację, nagłówek pierwszego poziomu, a czasem także hasło. Przypisz każdemu blokowi semantycznemu własny kontener. To nie tylko oddzieli elementy w przepływie, ale także ułatwi ich formatowanie. O wiele łatwiej będzie Ci wyśrodkować obiekt w znaczniku DIV, nadając mu klasę lub identyfikator.
Podczas renderowania elementów internetowych przeglądarka bierze pod uwagę trzy właściwości: dopełnienie, margines i obramowanie. Dopełnienie to przestrzeń pomiędzy treścią a jej obramowaniem. Margines - pola oddzielające jeden obiekt od drugiego. Granica to linie wzdłuż bloków. Można je przypisać do wszystkich na raz lub tylko do jednej strony:
div( obramowanie: 1px solid #333; obramowanie po lewej stronie: brak; )Te właściwości dodają wolna przestrzeń pomiędzy obiektami, a także pomagają je wyrównać i umieścić we właściwy sposób. Na przykład, jeśli blok z obrazem ma zostać przesunięty od lewej krawędzi do środka o 20%, przypisujesz do elementu wartość lewego marginesu wynoszącą 20%:
Blokuj-z-img (margines-lewy: 20%; )
Elementy można również formatować za pomocą wartości ich szerokości i ujemnego dopełnienia. Na przykład istnieje blok o wymiarach 200 na 200 pikseli. Najpierw przypiszemy mu pozycję absolutną i przesuniemy go do środka o 50%.
Div( pozycja: bezwzględna; lewa: 50%; )
Teraz, aby mieć pewność, że wyśrodkowany DIV będzie idealnie ustawiony, nadajemy mu ujemny margines z lewej strony równy 50% jego szerokości, czyli -100 pikseli:
Margines lewy: -100px;
W CSS nazywa się to „usuwaniem powietrza”. Ma jednak istotną wadę polegającą na konieczności wykonywania ciągłych obliczeń, co jest dość trudne w przypadku elementów o kilku poziomach zagnieżdżenia. Jeśli zostaną określone wartości dopełnienia i szerokości obramowania, przeglądarka domyślnie obliczy wymiary kontenera jako sumę grubości obramowań, dopełnienia po prawej i lewej stronie oraz samej zawartości w środku, co może również być niespodzianką.
Jeśli więc chcesz wyśrodkować DIV, użyj właściwości box-size z wartością border-box. Zapobiegnie to dodawaniu przez przeglądarkę wartości dopełnienia i obramowania do całkowitej szerokości elementu DIV. Aby podnieść lub obniżyć element, użyj także wartości ujemnych. Jednak w tym przypadku można je przypisać albo do górnego, albo dolnego pola kontenera.
Jest to łatwy sposób na wyśrodkowanie dużych bloków. Po prostu przypisujesz szerokość kontenera i właściwość marginesu do auto. Przeglądarka umieści blok na środku z równymi marginesami po lewej i prawej stronie, wykonując całą pracę samodzielnie. Dzięki temu nie ryzykujesz pomyłki w obliczeniach matematycznych i znacząco oszczędzasz swój czas.
Podczas tworzenia responsywnych aplikacji korzystaj z metody automatycznego pola. Najważniejsze jest przypisanie wartości szerokości do kontenera w em lub procentach. Powyższy przykładowy kod wyśrodkuje DIV na dowolnym urządzeniu, w tym Telefony komórkowe, zajmie 90% ekranu.
Domyślnie elementy DIV są uważane za elementy blokowe, a ich wartością wyświetlaną jest blok. W przypadku tej metody konieczne będzie zastąpienie tej właściwości. Odpowiednie tylko dla DIV z kontenerem nadrzędnym:
Elementowi z klasą external-div przypisana jest właściwość text-align o wartości center, która wyśrodkowuje tekst wewnątrz. Ale na razie przeglądarka widzi zagnieżdżony DIV jako obiekt blokowy. Aby właściwość text-align działała, element internal-div musi być traktowany jako małe litery. Dlatego w Tabela CSS dla selektora wewnętrznego div napisz następujący kod:
Inner-div (wyświetlanie: blok inline; )
Zmieniasz właściwość wyświetlania z block na inline-block.
Kaskadowe arkusze stylów umożliwiają dowolne przesuwanie, pochylanie, obracanie i przekształcanie elementów internetowych w inny sposób. Służy do tego właściwość transform. Wartości wskazują pożądany typ i stopień transformacji. W w tym przykładzie będziemy współpracować z tłumaczem:
transformacja: tłumaczenie (50%, 50%);Funkcja tłumaczenia przesuwa element z jego bieżącej pozycji w lewo/prawo i w górę/w dół. W nawiasach podaje się dwie wartości:
Jeśli element ma zostać przesunięty tylko wzdłuż jednej z osi współrzędnych, to po słowie „przetłumacz” podajemy nazwę osi, a w nawiasie wielkość wymaganego przemieszczenia:
Przekształć: przetłumacz Y(-20%);
W niektórych podręcznikach można znaleźć transformację z przedrostkami dostawców:
Transformacja Webkit: tłumaczenie (50%, 50%); -ms-transform: tłumaczenie (50%, 50%); transformacja: tłumaczenie (50%, 50%);
W 2018 roku nie jest to już konieczne, usługa jest obsługiwana przez wszystkie przeglądarki, w tym Edge i IE.
Aby wyśrodkować żądany DIV, funkcja tłumaczenia CSS zapisuje wartość 50% dla osi pionowej i poziomej. Spowoduje to, że przeglądarka przesunie element od jego bieżącej pozycji o połowę jego szerokości i wysokości. Należy określić właściwości szerokości i wysokości:
Należy pamiętać, że element, do którego zastosowano właściwość transform, porusza się niezależnie od otaczających go obiektów. Z jednej strony jest to wygodne, ale czasami, przesuwając się, DIV może nachodzić na inny kontener. Dlatego ten sposób centrowania elementów środnika jest uważany za niestandardowy i stosowany tylko w przypadkach skrajnej konieczności. Do animacji wykorzystywane są przekształcenia zgodne ze wszystkimi kanonami CSS.
Flexbox jest uważany za wyrafinowany sposób projektowania układów stron internetowych. Ale jeśli opanujesz to, zrozumiesz, że jest to o wiele prostsze i przyjemniejsze niż standardowe sposoby formatowanie. Specyfikacja Flexbox to elastyczny i niezwykle wydajny sposób obsługi elementów. Z po angielsku Nazwę modułu tłumaczy się jako „elastyczny kontener”. Wartości szerokości, wysokości i rozmieszczenia elementów dopasowują się automatycznie, bez obliczania wcięć i marginesów.
W poprzednich przykładach pracowaliśmy już z właściwością display, ale ustawiliśmy ją na wartości block i inline-block. Do tworzenia układów elastycznych użyjemy display: flex. Najpierw potrzebujemy elastycznego kontenera:
Aby przekonwertować go na kontener elastyczny w tabelach kaskadowych, piszemy:
Pojemnik elastyczny (wyświetlacz: flex; )
Wszystkie zagnieżdżone obiekty, ale tylko bezpośrednie obiekty potomne, będą elementami elastycznymi:
Jeśli umieścisz listę w elastycznym kontenerze, elementy listy li nie będą uważane za elementy elastyczne. Układ Flexbox będzie działał tylko na ul:
Aby zarządzać elementami elastycznymi, potrzebujesz justify-content i Align-Items. W zależności od określonych wartości te dwie właściwości automatycznie umieszczają obiekty zgodnie z potrzebami. Jeżeli musimy wyśrodkować wszystkie zagnieżdżone DIV-y, piszemy justify-content: center, wyrównanie-items: center i nic więcej. Przeglądarka wykona resztę pracy sama:
Aby wyśrodkować tekst na elementach DIV będących elementami elastycznymi, można zastosować standardową technikę wyrównywania tekstu. Możesz też uczynić każdy zagnieżdżony DIV także elastycznym kontenerem i zarządzać zawartością za pomocą justify-content. Metoda ta jest o wiele bardziej racjonalna, jeśli zawiera różnorodną treść, w tym grafikę, inne zagnieżdżone obiekty, w tym listy wielopoziomowe.
Dopasuj element blokowy o zadanej szerokości do poziomego środka strony internetowej.
Domyślnie szerokość elementu blokowego jest ustawiona na auto i zazwyczaj zajmuje całą dostępną szerokość. Dlatego stosując opisaną metodę można wyśrodkować tylko element, którego szerokość jest wyraźnie określona w procentach lub pikselach. Następnie należy dodać margines do stylu warstwy po lewej stronie (właściwość stylu margines-left) i po prawej stronie (margin-right) z wartością auto. Można jednak użyć właściwości marginesu uniwersalnego z wartością auto (przykład 1).
Przykład 1: Wyrównanie warstwy do środka
HTML5 CSS 2.1 IE Cr Op Fx
Wynik przykładu pokazano na ryc. 1.
Od autora: Witam Cię ponownie na łamach naszego bloga. W dzisiejszym artykule chciałbym porozmawiać o różnych technikach wyrównywania, które można zastosować zarówno do bloków, jak i ich zawartości. W szczególności, jak wyrównywać bloki w css, a także wyrównywać tekst.
W CSS centrowanie bloku jest łatwe. Jest to najbardziej znana technika dla wielu, ale przede wszystkim chciałbym o niej teraz porozmawiać. Oznacza to wyśrodkowane w poziomie wyrównanie względem elementu nadrzędnego. Jak to jest zrobione? Załóżmy, że mamy pojemnik i znajduje się w nim obiekt eksperymentalny:
< div id = "wrapper" > < div id = "header" > < / div > < / div > |
Załóżmy, że jest to nagłówek witryny. Nie rozciąga się na całą szerokość okna i musimy go wycentrować. Piszemy tak:
#nagłówek( szerokość/maks. szerokość: 800px; margines: 0 auto; |
Musimy określić dokładną lub maksymalną szerokość, a następnie zapisać kluczową właściwość - margines: 0 auto. Ustawia zewnętrzne marginesy naszego nagłówka, pierwsza wartość określa margines górny i dolny, a druga określa margines prawy i lewy. Wartość auto informuje przeglądarkę, aby automatycznie obliczyła dopełnienie po obu stronach, tak aby element był dokładnie wyśrodkowany względem elementu nadrzędnego. Wygodny!
Jest to również bardzo prosta technika. Aby wyrównać wszystkie elementy śródliniowe, możesz użyć właściwości text-align i jej wartości: left, Right, Center. Ten ostatni centruje tekst, a tego właśnie potrzebujemy. Możesz nawet wyrównać obraz w ten sam sposób, ponieważ domyślnie jest to również element osadzony.
Ale to jest bardziej skomplikowane. Domyślnie nie ma prostej, dobrze znanej właściwości, która pozwalałaby łatwo wyśrodkować tekst w pionie w kontenerze blokowym. Istnieje jednak kilka technik, które projektanci układu wymyślili na przestrzeni lat.
Ustaw wysokość bloku za pomocą dopełnienia. Sposobem nie jest ustawienie jawnej wysokości za pomocą wysokości, ale utworzenie jej sztucznie za pomocą dopełnienia na górze i na dole, które powinny być takie same. Stwórzmy dowolny blok i napiszmy do niego następujące właściwości:
div(tło: #ccc; dopełnienie: 30px 0; )
div( tło: #ccc; dopełnienie: 30px 0; |
Tło służy jedynie do wizualnego pokazania krawędzi i wypełnienia. Teraz wysokość bloku składa się z tych dwóch wcięć i samej linii i wszystko wygląda tak:
Zdefiniuj wysokość linii dla bloku. Myślę, że jest to bardziej poprawny sposób, jeśli chcesz wyrównać jeden wiersz tekstu. Dzięki niemu możesz zapisać wysokość zgodnie z normą, korzystając z właściwości height. Następnie musi również ustawić wysokość linii, taką samą jak wysokość bloku jako całości.
div(wysokość: 60 pikseli; wysokość linii: 60 pikseli; )
div( wysokość: 60px; wysokość linii: 60px; |
Wynik będzie podobny do powyższego obrazu. Wszystko będzie działać, nawet jeśli dodasz dopełnienie. Jednak tylko dla jednej linii. Jeśli potrzebujesz więcej tekstu w elemencie, ta metoda nie będzie działać.
Konwertuj blok na komórkę tabeli. Istotą tej metody jest to, że komórka tabeli posiada właściwość Vertical-align: Middle, która centruje element w pionie. Odpowiednio w tym przypadku blok należy ustawić na następującą wartość:
div(wyświetlanie: komórka tabeli; wyrównanie do pionu: środek; )
div( wyświetlacz: tabela - komórka; pionowo - wyrównaj: środek; |
Ta metoda jest dobra, ponieważ możesz wyrównać dowolną ilość tekstu do środka. Ale lepiej napisać display: table do bloku, w którym zagnieżdżony jest nasz div, w przeciwnym razie może to nie zadziałać.
Cóż, tutaj dochodzimy do ostatniej techniki na dziś - jest to pionowe wyrównanie samych bloków. Trzeba powiedzieć, że znowu nie ma właściwości, która byłaby przeznaczona specjalnie do tego, ale jest kilka sztuczek, o których powinieneś wiedzieć.
Ustaw wcięcia jako procent. Jeśli znasz wysokość elementu nadrzędnego i umieścisz w nim kolejny element blokowy, możesz go wyśrodkować za pomocą procentowego dopełnienia. Na przykład element nadrzędny ma wysokość 600 pikseli. Umieszczasz w nim blok o wysokości 300 pikseli. Jak bardzo musisz cofnąć się na górze i na dole, aby go wyśrodkować? 150 pikseli każdy, co stanowi 25% wysokości rodzica.
Metoda ta pozwala na wyrównanie tylko wtedy, gdy wymiary pozwalają na obliczenia. A jeśli Twój rodzic ma 887 pikseli wzrostu, nie będziesz w stanie niczego dokładnie nagrać, to już jest jasne.
Wstaw element do komórki tabeli. Ponownie, jeśli przekształcimy element nadrzędny w komórkę tabeli, wówczas wstawiony do niego blok zostanie automatycznie wyśrodkowany w pionie. Aby to zrobić, rodzic musi po prostu ustawić Vertical-align: Middle.
A jeśli dodatkowo napiszemy również margines: 0 auto, to element zostanie wyśrodkowany poziomo!
Bardzo często zadaniem jest wyrównanie bloku na środku strony/ekranu i to nawet bez skryptu Java, bez ustawiania sztywnych wymiarów czy ujemnych wcięć i tak, aby scrollbary działały dla rodzica, jeśli blok przekroczy jego rozmiar . W Internecie można znaleźć sporo monotonnych przykładów wyrównywania bloku do środka ekranu. Z reguły większość z nich opiera się na tych samych zasadach.
Poniżej znajdują się główne sposoby rozwiązania problemu, ich zalety i wady. Aby zrozumieć istotę przykładów, zalecam zmniejszenie wysokości/szerokości okna Wynik w przykładach pod podanymi linkami.
Nadrzędny ( szerokość: 100%; wysokość: 100%; pozycja: bezwzględna; góra: 0; lewa: 0; przepełnienie: auto; ) .block ( szerokość: 250px; wysokość: 250px; pozycja: bezwzględna; góra: 50%; lewa : 50%; margines: -125px 0 0 -125px; img ( max-width: 100%; wysokość: auto; wyświetlacz: blok; margines: 0 auto; obramowanie: brak; ) )
Nadrzędny ( szerokość: 100%; wysokość: 100%; pozycja: bezwzględna; góra: 0; lewa: 0; przepełnienie: auto; ) .block ( szerokość: 250px; wysokość: 250px; pozycja: bezwzględna; góra: 0; prawa: 0; dół: 0; lewy: 0; margines: automatyczny; img ( maksymalna szerokość: 100%; wysokość: auto; wyświetlacz: blok; margines: 0 automatyczny; obramowanie: brak; ) )
Rodzic ( szerokość: 100%; wysokość: 100%; wyświetlacz: tabela; pozycja: bezwzględna; góra: 0; lewy: 0; > .inner ( wyświetlacz: komórka tabeli; wyrównanie tekstu: środek; wyrównanie do pionu: środek; ) ) .block ( display: inline-block; img ( display: block; border: none; ) )
Aby dodać zwój do tego przykładu, będziesz musiał dodać jeszcze jeden element do projektu.
Przykład: jsfiddle.net/serdidg/fk5nqh52/3.
Rodzic ( szerokość: 100%; wysokość: 100%; pozycja: bezwzględna; góra: 0; lewa: 0; przepełnienie: auto; odstęp: terazrap; wyrównanie tekstu: środek; rozmiar czcionki: 0; &:przed ( wysokość: 100%; wyświetlanie: blok inline; wyrównanie do pionu: środek; treść: ""; ) .block ( wyświetlanie: blok w wierszu; odstępy: normalne; wyrównanie do pionu: do środka; wyrównanie tekstu: do lewej; img (wyświetlanie: blok; obramowanie: brak; ) )
Lub, jeśli chcesz, aby element nadrzędny zajmował tylko wysokość i szerokość okna, a nie całą stronę:
Rodzic ( pozycja: stała; góra: 0; prawa: 0; dół: 0; lewa: 0; przepełnienie: auto; biała spacja: terazrap; wyrównanie tekstu: środek; rozmiar czcionki: 0; &: przed ( wysokość: 100%; wyświetlanie: blok inline; wyrównanie do pionu: środek; zawartość: ""; ) .block ( wyświetlanie: blok inline; odstępy: normalne; wyrównanie do pionu: do środka; wyrównanie tekstu: do lewej; img ( wyświetlacz: blok; obramowanie: brak; ) )
Rodzic ( szerokość: 100%; wysokość: 100%; pozycja: stała; góra: 0; lewa: 0; wyświetlacz: flex; wyrównanie elementów: środek; wyrównanie zawartości: środek; justowanie zawartości: środek; przepełnienie: auto; ) .block (tło: #60a839; img (wyświetlanie: blok; obramowanie: brak; ) )
Rodzic ( szerokość: 100%; wysokość: 100%; pozycja: stała; góra: 0; lewa: 0; przepełnienie: auto; ) .block ( pozycja: bezwzględna; góra: 50%; lewa: 50%; transformacja: tłumaczenie( -50%, -50%); img (wyświetlanie: blok; ) )
Rodzic ( szerokość: 100%; wysokość: 100%; pozycja: bezwzględna; góra: 0; lewa: 0; przepełnienie: auto; tło: brak; obramowanie: brak; kontur: brak; ) .block ( display: inline-block; img (wyświetlanie: blok;; obramowanie: brak; ) )
Możesz także wyrównać obraz do środka, a jeśli obraz jest większy rodzic, przeskaluj go do rozmiaru rodzic.
Przykład: jsfiddle.net/serdidg/nfqg9rza/3.
Przykład z dużym obrazem:
