Quando si impagina una pagina, spesso è necessario eseguire l'allineamento al centro in modo CSS: ad esempio, centrare il blocco principale. Esistono diverse opzioni per risolvere questo problema, ognuna delle quali prima o poi deve essere utilizzata da qualsiasi progettista di layout.
Allineamento del testo al centro
Spesso, per scopi decorativi, si desidera impostare l'allineamento del testo al centro, CSS in questo caso consente di ridurre i tempi di impaginazione. In precedenza, ciò avveniva utilizzando gli attributi HTML, ma ora lo standard richiede che il testo sia allineato utilizzando i fogli di stile. A differenza dei blocchi, che devono modificare i margini, nei CSS l'allineamento del testo è centrato utilizzando una riga:
- allineamento testo:centro;
Questa proprietà viene ereditata e passata dal genitore a tutti i figli. Influisce non solo sul testo, ma anche su altri elementi. Per fare ciò, devono essere inline (ad esempio, span) o inline-block (tutti i blocchi che hanno la proprietà display: block impostata). Quest'ultima opzione consente anche di modificare la larghezza e l'altezza dell'elemento, regolando in modo più flessibile i rientri.
Spesso nelle pagine, align è attribuito al tag stesso. Questo rende immediatamente il codice non valido, poiché il W3C ha deprecato l'attributo align. Non è consigliabile utilizzarlo su una pagina.
Allineare un blocco al centro
Se hai bisogno di centrare un div, CSS ha un modo abbastanza comodo: usare i margini. I rientri possono essere impostati sia per gli elementi di blocco che per gli elementi di blocco in linea. Il valore della proprietà deve assumere i valori 0 (rientri verticali) e auto (rientri orizzontali automatici):
- margine:0 automatico;
Ora questa opzione è riconosciuta come assolutamente valida. L'utilizzo dei margini consente inoltre di impostare l'allineamento dell'immagine al centro: consente di risolvere molti problemi legati al posizionamento di un elemento su una pagina.
Allinea il blocco a sinistra o a destra
A volte non è necessario centrare in modo CSS, ma è necessario affiancare due blocchi: uno sul bordo sinistro, l'altro a destra. Per fare ciò, esiste una proprietà float, che può assumere uno dei tre valori: sinistra, destra o nessuno. Diciamo che hai due blocchi che devono essere affiancati. Allora il codice sarà questo:
- .sinistra (flottante:sinistra;)
- .destra(flottante:destra)
Se è presente anche un terzo blocco, che dovrebbe trovarsi sotto i primi due blocchi (ad esempio un piè di pagina), è necessario impostare la proprietà clear:
- .sinistra (flottante:sinistra;)
- .destra(flottante:destra)
- piè di pagina (chiaro: entrambi)
Il fatto è che i blocchi con classi sinistra e destra cadono fuori dal flusso generale, cioè tutti gli altri elementi ignorano l'esistenza stessa degli elementi allineati. La proprietà clear:both consente al footer o a qualsiasi altro blocco di vedere gli elementi che sono caduti fuori dal flusso e disabilita il wrapping (float) sia a sinistra che a destra. Pertanto, nel nostro esempio, il piè di pagina si sposterà verso il basso.
Allineamento verticale
Ci sono casi in cui non è sufficiente impostare l'allineamento del centro in modalità CSS, è necessario anche modificare la posizione verticale del blocco figlio. Qualsiasi elemento inline o inline-block può essere a filo con il bordo superiore o inferiore, trovarsi al centro di un elemento padre o trovarsi in una posizione arbitraria. Molto spesso, un blocco deve essere centrato, operazione che viene eseguita utilizzando l'attributo vertical-align. Diciamo che ci sono due blocchi, uno annidato nell'altro. In questo caso, il blocco interno è un elemento inline-block (visualizzazione: inline-block). Devi allineare il blocco figlio verticalmente:
- allineamento superiore - .child(vertical-align:top);
- allineamento centrale - .child(vertical-align:middle);
- allineamento inferiore - .child(vertical-align:bottom);
Gli elementi a livello di blocco non sono interessati dall'allineamento del testo o dall'allineamento verticale.
Possibili problemi con i blocchi allineati
A volte centrare un div in modo CSS può causare piccoli problemi. Ad esempio, quando si usa float: diciamo che ci sono tre blocchi: .first, .second e .third. Il secondo e il terzo blocco si trovano nel primo. L'elemento con classe second è allineato a sinistra e l'ultimo blocco è allineato a destra. Dopo l'allineamento, entrambi sono caduti fuori dal flusso. Se l'elemento padre non ha un'altezza impostata (ad esempio, 30em), non si estenderà più all'altezza dei blocchi figlio. Per evitare questo errore, usano uno "spacer", un blocco speciale che vede .second e .third. Codice CSS:
- .secondo(flottante:sinistra)
- .terzo(flottante:destra)
- .clearfix(height:0; clear: entrambi;)
Viene spesso utilizzata la pseudo-classe :after, che permette anche di rimettere a posto i blocchi creando uno pseudo spacer (nell'esempio, il div con la classe container si trova all'interno di .first e contiene .left e .right):
- .sinistra(flottante:sinistra)
- .destra(flottante:destra)
- .container:after(content:""; display:table; clear:entrambi;)
Le opzioni di cui sopra sono le più comuni, anche se esistono diverse varianti. Puoi sempre trovare il modo più semplice e conveniente per creare uno pseudo distanziatore attraverso la sperimentazione.
Un altro problema che spesso i progettisti di layout devono affrontare è l'allineamento degli elementi inline-block. Uno spazio viene automaticamente aggiunto dopo ciascuno di essi. La proprietà margin, che è impostata su un margine negativo, aiuta a far fronte a questo. Ci sono altri modi che vengono usati molto meno spesso: per esempio, azzerando In questo caso, font-size:0 è scritto nelle proprietà dell'elemento genitore. Se è presente del testo all'interno dei blocchi, la dimensione del carattere richiesta viene già restituita nelle proprietà degli elementi del blocco in linea. Ad esempio, font-size:1em. Il metodo non è sempre conveniente, quindi l'opzione con rientri esterni viene utilizzata molto più spesso.
L'allineamento dei blocchi ti consente di creare pagine belle e funzionali: questo è il layout del layout generale, l'ubicazione delle merci nei negozi online e le foto su un sito di biglietti da visita.
L'allineamento del testo determina l'aspetto e l'orientamento dei bordi del paragrafo e può essere a sinistra, a destra, al centro o giustificato. In tavola. 1 mostra le opzioni di allineamento del blocco di testo.
| Allineamento a sinistra | Allineamento corretto | Allineamento al centro | Giustificare |
|---|---|---|---|
| Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. | Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. |
L'opzione più comune è allineata a sinistra, quando il testo sinistro viene spostato sul bordo, mentre quello destro rimane frastagliato. L'allineamento a destra e al centro viene utilizzato principalmente nelle intestazioni e nei sottotitoli. Va tenuto presente che quando si utilizza la giustificazione nel testo, possono apparire ampi intervalli tra le parole, il che non è molto bello.
Il tag paragrafo viene solitamente utilizzato per impostare l'allineamento del testo.
Con l'attributo align, che specifica il metodo di allineamento. È anche consentito allineare un blocco di testo utilizzando il tag
| codice HTML | Descrizione |
|---|---|
| Aggiunge un nuovo paragrafo di testo, giustificato a sinistra per impostazione predefinita. I piccoli rientri verticali vengono aggiunti automaticamente prima e dopo il paragrafo. | |
Testo |
Allineamento al centro. |
Testo |
Allineamento a sinistra. |
Testo |
|
Testo |
Allineamento della larghezza. |
| Disabilita il ritorno a capo automatico della riga, anche se il testo è più largo della finestra del browser. | |
| Testo |
Consente al browser di interrompere la riga nella posizione specificata, anche se viene utilizzato il tag |
Testo
|
Allineamento al centro. |
Testo
|
Allineamento a sinistra. |
Testo
|
Allineamento corretto. |
Testo
|
Allineamento della larghezza. |
L'allineamento a sinistra degli elementi è impostato per impostazione predefinita, quindi non è necessario specificarlo nuovamente. Quindi align="left" può essere omesso.
Differenza tra paragrafo (tag
) e tag
L'attributo align è abbastanza versatile e può essere applicato non solo al corpo del testo, ma anche a titoli come
. L'esempio 1 mostra come impostare l'allineamento in questo caso.
Esempio 1: allineamento del testo
Come catturare un leone?
metodo di numerazione
Dividiamo il deserto in una serie di sezioni elementari, le cui dimensioni coincidono con le dimensioni complessive del leone, ma sono inferiori alle dimensioni della gabbia. Successivamente, con una semplice enumerazione, determiniamo l'area in cui si trova il leone, che porta automaticamente alla sua cattura.
metodo dicotomico
Dividiamo il deserto in due metà. In una parte c'è un leone, nell'altra non c'è. Prendiamo la metà in cui si trova il leone e la dividiamo nuovamente a metà. Quindi ripetiamo fino a quando il leone non viene catturato.
Il risultato dell'esempio è mostrato in Fig. uno.
Riso. 1. Allinea il testo a destra e a sinistra
In questo esempio, l'intestazione è allineata al centro della finestra del browser, il paragrafo selezionato è allineato a destra e il corpo del testo è allineato a sinistra.
Esistono diversi modi fondamentalmente diversi per centrare un oggetto verticalmente con i CSS, ma scegliere quello giusto può essere complicato. Ne esamineremo alcuni e creeremo anche un piccolo sito Web utilizzando le conoscenze acquisite.
L'allineamento verticale del centro con CSS non è così facile da ottenere. Ci sono molti modi e non tutti funzionano in tutti i browser. Diamo un'occhiata a 5 diversi metodi e ai pro e contro di ciascuno. Esempio.
1a via
Questo metodo presuppone che stiamo impostando un elemento
professionisti
- Il contenuto può cambiare l'altezza in modo dinamico (l'altezza non è definita in CSS).
- Il contenuto non viene troncato se non c'è abbastanza spazio per esso.
Svantaggi
- Non funziona in IE 7 e versioni precedenti
- Molti tag annidati
2° metodo
Questo metodo utilizza il posizionamento assoluto del div , che ha la parte superiore impostata al 50% e il margine superiore (margin-top) meno la metà dell'altezza del contenuto. Ciò implica che l'oggetto deve avere un'altezza fissa, definita negli stili CSS.
Poiché l'altezza è fissa, puoi impostare overflow:auto; per il div contenente il contenuto, quindi se il contenuto non si adatta, verranno visualizzate le barre di scorrimento.
professionisti
- Funziona con tutti i browser.
- Nessun investimento aggiuntivo.
Svantaggi
- Quando lo spazio non è sufficiente, il contenuto scompare (ad es. il div è all'interno del corpo e l'utente rimpicciolisce le finestre, nel qual caso le barre di scorrimento non verranno visualizzate.
3° metodo
In questo metodo, avvolgeremo il contenuto div con un altro div. Imposta la sua altezza al 50% (altezza: 50%;) e il suo margine inferiore alla metà della sua altezza (margin-bottom:-contentheight;). Il contenuto cancellerà il float e sarà centrato.
professionisti
- Funziona con tutti i browser.
- Quando lo spazio non è sufficiente (ad esempio, quando la finestra è ridotta) il contenuto non viene tagliato, verranno visualizzate le barre di scorrimento.
Svantaggi
- Ne penso solo uno: che venga utilizzato un elemento vuoto in più.
4° metodo.
Questo metodo utilizza la proprietà position:absolute; per div con dimensioni fisse (larghezza e altezza). Quindi impostiamo le sue coordinate top:0; in basso:0; , ma poiché ha un'altezza fissa, non può allungarsi ed è centrato. Questo è molto simile al metodo ben noto di centrare orizzontalmente un elemento a livello di blocco di larghezza fissa (margine: 0 auto;).
professionisti
- Molto semplice.
Svantaggi
- Non funziona in Internet Explorer
- Il contenuto verrà ritagliato senza barre di scorrimento se non c'è abbastanza spazio nel contenitore.
5° metodo
È possibile utilizzare questo metodo per centrare una singola riga di testo. Basta impostare l'altezza del testo (altezza della linea) sull'altezza dell'elemento (altezza). Successivamente, la linea verrà visualizzata al centro.
professionisti
- Funziona con tutti i browser.
- Non taglia il testo se non si adatta.
Svantaggi
- Funziona solo con testo (non funziona con elementi di blocco).
- Se c'è più di una riga di testo, sembra molto brutto.
Questo metodo è molto utile per piccoli elementi, come centrare il testo in un pulsante o in una casella di testo.
Ora che sai come ottenere l'allineamento verticale al centro, creiamo un semplice sito Web che finisce per assomigliare a questo:
Passo 1
È sempre bene iniziare con il markup semantico. La nostra pagina sarà strutturata così:
- #floater (per centrare il contenuto)
- #centrato (elemento centrale)
- #lato
- #logo
- #nav (elenco
- #contenuto
- #bottom (per i diritti d'autore e tutto)
Scriviamo il seguente markup html:
Una società centrata Un'aziendaTitolo della pagina
Riprogettare olisticamente l'outsourcing a valore aggiunto dopo la collaborazione incentrata sui processi e la condivisione di idee. Semplifica energicamente i mercati di nicchia di grande impatto tramite imperativi abilitati. Predomina in modo olistico l'innovazione premium dopo scenari avvincenti. Riassumi senza problemi standard elevati nel capitale umano con prodotti manifatturieri all'avanguardia. Distintivamente sindacato schemi conformi agli standard prima di robusti vortali. Ricapitola in modo univoco la disponibilità al Web sfruttata rispetto alle informazioni pronte all'uso.
Titolo 2
Abbraccia in modo efficiente la prontezza web personalizzata piuttosto che i processi diretti dal cliente. Crescere in modo assertivo gli imperativi multipiattaforma rispetto alle tecnologie proattive. Potenzia comodamente metaservizi multidisciplinari senza interfacce a livello aziendale. Semplifica comodamente le aree tematiche strategiche competitive con e-market mirati. Sindacati in modo fosforescente di comunità di prim'ordine nei confronti dei mercati a valore aggiunto. Reinventare opportunamente servizi olistici prima di robusti servizi elettronici.
L'avviso sul copyright va qui
Passo 2
Ora scriveremo il CSS più semplice per posizionare gli elementi nella pagina. Dovresti salvare questo codice nel file style.css. È su di esso che il collegamento è scritto nel file html.
Html, body ( margin: 0; padding: 0; height: 100%; ) body ( background: url("page_bg.jpg") 50% 50% no-repeat #FC3; font-family: Georgia, Times, serifs; ) #floater ( posizione: relativa; float: sinistra; altezza: 50%; margine inferiore: -200px; larghezza: 1px; ) #centrato ( posizione: relativo; chiaro: sinistra; altezza: 400px; larghezza: 80%; max -width: 800px; min-width: 400px; margin: 0 auto; background: #fff; border: 4px solid #666; ) #bottom ( posizione: assoluta; fondo: 0; destra: 0; ) #nav ( posizione: assoluto; a sinistra: 0; in alto: 0; in basso: 0; a destra: 70%; riempimento: 20px; margine: 10px; ) #content ( posizione: assoluto; a sinistra: 30%; a destra: 0; in alto: 0; in basso: 0; overflow: auto; altezza: 340px; riempimento: 20px; margine: 10px; )
Prima di poter allineare il contenuto al centro, è necessario impostare l'altezza del corpo e dell'html al 100%. Poiché l'altezza è considerata senza padding interno ed esterno (padding e margine), li impostiamo (padding) su 0 in modo che non ci siano barre di scorrimento.
Il riempimento inferiore per l'elemento "floater" è meno la metà dell'altezza del contenuto (400px), ovvero -200px ;
La tua pagina ora dovrebbe assomigliare a questa:
La larghezza dell'elemento #centrato è 80%. Questo rende il nostro sito più stretto su schermi piccoli e più largo su quelli più grandi. la maggior parte dei siti sembra brutta sui nuovi monitor wide nell'angolo in alto a sinistra. Anche le proprietà min-width e max-width vincolano la nostra pagina in modo che non sembri troppo ampia o troppo stretta. Internet Explorer non supporta queste proprietà. Deve essere impostato su una larghezza fissa.
Poiché l'elemento #centered è impostato su position:relative , possiamo utilizzare il posizionamento assoluto degli elementi al suo interno. Quindi imposta overflow:auto; per l'elemento #content in modo che le barre di scorrimento appaiano se non ci sono contenuti da adattare.
Passaggio 3
E l'ultima cosa che faremo è aggiungere uno stile per rendere la pagina un po' più attraente. Cominciamo con il menu.
#nav ul ( stile elenco: nessuno; riempimento: 0; margine: 20px 0 0 0; rientro testo: 0; ) #nav li ( riempimento: 0; margine: 3px; ) #nav li a ( display: blocco; background-color: #e8e8e8; padding: 7px; margin: 0; text-decoration: nessuno; colore: #000; border-bottom: 1px solido #bbb; text-align: right; ) #nav li a::after ( content: """; color: #aaa; font-weight: grassetto; display: inline; float: right; margin: 0 2px 0 5px; ) #nav li a:hover, #nav li a:focus ( background: # f8f8f8; border-bottom-color: #777; ) #nav li a:hover::after ( margin: 0 0 0 7px; color: #f93; ) #nav li a:active ( padding: 8px 7px 6px 7px; )
La prima cosa che abbiamo fatto per migliorare l'aspetto del menu è stata rimuovere i punti elenco impostando l'attributo list-style:none e anche impostare il padding e il padding, poiché le impostazioni predefinite variano notevolmente tra i browser.
Si noti che abbiamo quindi specificato che i collegamenti devono essere visualizzati come elementi a livello di blocco. Ora, quando vengono visualizzati, sono allungati per l'intera larghezza dell'elemento in cui si trovano.
Un'altra cosa interessante che abbiamo usato per i menu sono le pseudo-classi :before e :after. Ti permettono di aggiungere qualcosa prima e dopo un elemento. Questo è un buon modo per aggiungere icone o simboli come una freccia alla fine di ogni collegamento. Questo trucco non funziona in Internet Explorer 7 e versioni precedenti.
Passaggio 4
E, ultimo ma non meno importante, aggiungeremo dei veli al nostro design per una bellezza ancora maggiore.
#centered ( -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; ) h1, h2, h3, h4, h5, h6 ( famiglia di caratteri: Helvetica, Arial, sans- serif; peso carattere: normale; colore: #666; ) h1 ( colore: #f93; bordo inferiore: 1px solido #ddd; spaziatura lettera: -0.05em; peso carattere: grassetto; margine superiore: 0; padding-top: 0; ) #bottom ( padding: 10px; dimensione carattere: 0.7em; colore: #f03; ) #logo (dimensione carattere: 2em; allineamento testo: centro; colore: #999; ) #logo strong (font-weight: normal; ) #logo span ( display: block; font-size: 4em; line-height: 0.7em; color: #666; ) p, h2, h3 ( line-height: 1.6em; ) a ( colore: #f03; )
In questi stili, impostiamo gli angoli arrotondati per l'elemento #centrato. In CSS3, questo sarà gestito dalla proprietà border-radius. Questo non è ancora implementato da alcuni browser, ad eccezione dell'uso dei prefissi -moz e -webkit per Mozilla Firefox e Safari/Webkit.
Compatibilità
Come avrai intuito, la principale fonte di problemi di compatibilità è Internet Explorer:
- L'elemento #floater deve essere impostato su una larghezza
- Riempimento extra intorno ai menu in IE 6
237154 visualizzazioni
Finora, abbiamo allineato solo gli elementi a sinistra. Più precisamente, non l'abbiamo fatto affatto e il browser stesso allinea gli elementi a sinistra per impostazione predefinita. Certo, sarebbe troppo noioso allineare tutto a sinistra. Pertanto, ci sono diversi modi per allinearsi al centro ea destra.
L'allineamento degli elementi è qualcosa che devi solo sapere quando . La prima cosa da fare è digitare la pagina più semplice.
C'era una volta un tag
Non vi consiglio di usarlo ora, vista la disponibilità di metodi più moderni, ma non posso fare a meno di citarlo. Usarlo è molto, molto semplice. Tutto ciò di cui hai bisogno per centrare l'allineamento, metti all'interno di questo tag. Qui, ad esempio, qui allineiamo l'intestazione del 1° livello al centro.
Puoi anche aggiungere un'immagine centrata, passiamo anche alla riga successiva usando il tag
:
Intestazione di livello 1 centrata
Era un'etichetta
, che è già deprecato, contrariamente alle tue aspettative sui tag , ma che dire di quello giusto? Per risolvere questo problema, gli sviluppatori hanno escogitato un modo universale per allineare gli elementi. HTML. Il metodo consiste nell'utilizzare i cosiddetti contenitori, che vengono creati utilizzando il tag
. Cioè, tutto ciò che deve essere posizionato in un contenitore specifico viene posizionato all'interno del tag. E questo tag ha già l'attributo " allineare", il cui valore determina la posizione di questo contenitore. Esistono tre valori: " sinistra", "centro", "Giusto". L'impostazione predefinita è " sinistra Tuttavia, non credo che questo ti sorprenda.Ora scriviamo lo stesso codice HTML, ma con l'uso dei contenitori, inoltre, allineiamoci non al centro, ma a destra.
Come puoi vedere, tutto funziona. Ti consiglio di cambiare anche il valore dell'attributo " allineare" per esaminare altri tipi di allineamento del contenuto del contenitore.
Un altro modo per allineare gli elementi HTML- queste sono tabelle, ma questo argomento merita una discussione a parte, quindi ne parleremo in uno dei seguenti articoli.
Per ora, la tua pagina dovrebbe apparire così:
Intestazione di livello 1 centrata
Intestazione di livello 1, allineata a destra
Cordiali saluti, Mikhail Rusakov.
PS Se vuoi saperne di più su HTML, quindi dai un'occhiata al mio corso gratuito con un esempio di creazione di un sito web su HTML:
Molto spesso il compito è allineare il blocco al centro della pagina/schermo, e anche senza uno script java, senza impostare hard size o rientri negativi, in modo che le barre di scorrimento funzionino sul genitore se il blocco supera le sue dimensioni. Ci sono molti esempi monotoni in rete su come allineare un blocco al centro dello schermo. Di norma, la maggior parte di essi si basa sugli stessi principi.
Di seguito sono riportati i modi principali per risolvere il problema, i loro pro e contro. Per comprendere l'essenza degli esempi, consiglio di ridurre l'altezza/larghezza della finestra Risultato negli esempi ai link indicati.Opzione 1. Imbottitura negativa.
Posizionamento bloccare attributi top e left del 50% e conoscendo in anticipo l'altezza e la larghezza del blocco, impostare un margine negativo, che è uguale alla metà della dimensione bloccare. Un enorme svantaggio di questa opzione è che devi contare i rientri negativi. Stessa strada bloccare si comporta in modo non corretto nell'ambiente delle barre di scorrimento: viene semplicemente tagliato perché ha rientri negativi.Parent ( larghezza: 100%; altezza: 100%; posizione: assoluta; in alto: 0; sinistra: 0; overflow: auto; ) .block ( larghezza: 250px; altezza: 250px; posizione: assoluta; in alto: 50%; sinistra : 50%; margine: -125px 0 0 -125px; img ( larghezza massima: 100%; altezza: auto; display: blocco; margine: 0 auto; bordo: nessuno; ) )
Opzione 2: rientro automatico.
Meno comune, ma simile al primo. Per bloccare imposta la larghezza e l'altezza, posiziona gli attributi in alto a destra in basso a sinistra su 0 e imposta il margine automatico. Il vantaggio di questa opzione sono le barre di scorrimento funzionanti genitore, se quest'ultimo ha larghezza e altezza del 100%. Lo svantaggio di questo metodo è il dimensionamento rigido.Parent ( larghezza: 100%; altezza: 100%; posizione: assoluta; in alto: 0; sinistra: 0; overflow: auto; ) .block ( larghezza: 250px; altezza: 250px; posizione: assoluta; in alto: 0; destra: 0; in basso: 0; a sinistra: 0; margine: auto; img ( larghezza massima: 100%; altezza: auto; display: blocco; margine: 0 auto; bordo: nessuno; ) )
Opzione 3. Tabella.
Noi chiediamo genitore stili tabella, cella genitore Imposta l'allineamento del testo al centro. MA blocco impostare il modello di blocco in linea. Gli svantaggi sono le barre di scorrimento non funzionanti e, in generale, non l'estetica dell'"emulazione" della tabella.Parent ( larghezza: 100%; altezza: 100%; display: tabella; posizione: assoluta; in alto: 0; sinistra: 0; > .inner ( display: cella di tabella; allineamento del testo: centro; allineamento verticale: al centro; ) ) .block ( display: inline-block; img ( display: block; border: nessuno; ) )
Per aggiungere una pergamena a questo esempio, dovrai aggiungere un altro elemento alla struttura.
Esempio: jsfiddle.net/serdidg/fk5nqh52/3 .Opzione 4. Pseudoelemento.
Questa opzione è priva di tutti i problemi elencati nei metodi precedenti e risolve anche i compiti originali. Il punto è avere genitore impostare gli stili pseudo elemento prima, vale a dire altezza 100%, allineamento centrale e modello scatolato in linea. Lo stesso con bloccare metti il modello del blocco in linea, allineamento centrale. a bloccare non è caduto sotto pseudo elemento quando le dimensioni del primo sono maggiori di genitore, specificare genitore white-space: nowrap e font-size: 0 dopo di che y bloccare cancella questi stili con il seguente - spazio bianco: normale. In questo esempio, font-size: 0 è necessario per rimuovere lo spazio risultante tra genitore e bloccare in relazione alla formattazione del codice. Il divario può essere rimosso in altri modi, ma è considerato meglio semplicemente non consentirlo.Parent ( larghezza: 100%; altezza: 100%; posizione: assoluta; in alto: 0; sinistra: 0; overflow: auto; spazio bianco: nowrap; allineamento del testo: centro; dimensione del carattere: 0; &:prima ( altezza: 100%; display: blocco in linea; allineamento verticale: al centro; contenuto: ""; ) ) .block ( display: blocco in linea; spazio bianco: normale; allineamento verticale: al centro; allineamento testo: a sinistra ; img ( display: blocco; bordo: nessuno; ) )
Oppure, se vuoi che il genitore occupi solo l'altezza e la larghezza della finestra, non l'intera pagina:
Parent ( position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto; white-space: nowrap; text-align: center; font-size: 0; &:before ( height: 100%; display: blocco in linea; allineamento verticale: al centro; contenuto: ""; ) ) .block ( display: blocco in linea; spazio bianco: normale; allineamento verticale: al centro; allineamento del testo: a sinistra; img ( display: blocco; bordo: nessuno; ) )
Opzione 5. Flexbox.
Uno dei modi più semplici ed eleganti è utilizzare flexbox. Non richiede movimenti del corpo non necessari, descrive l'essenza di ciò che sta accadendo in modo abbastanza chiaro e ha un'elevata flessibilità. L'unica cosa da ricordare quando si sceglie questo metodo è il supporto per IE dalla versione 10 inclusa. caniuse.com/#feat=flexboxParent ( larghezza: 100%; altezza: 100%; posizione: fissa; in alto: 0; sinistra: 0; display: flex; align-elementi: centro; align-content: centro; giustifica-contenuto: centro; overflow: auto; ) .block ( background: #60a839; img ( display: block; border: nessuno; ) )
Opzione 6. Trasforma.
Adatto se siamo limitati dalla struttura e non c'è modo di manipolare l'elemento genitore, ma il blocco deve essere allineato in qualche modo. La funzione translate() css verrà in soccorso. Un valore del 50% di posizione assoluta posizionerà l'angolo in alto a sinistra della scatola esattamente al centro, quindi un valore di traslazione negativo sposterà la scatola rispetto alle sue stesse dimensioni. Tieni presente che gli effetti negativi possono apparire sotto forma di bordi sfocati o stile del carattere. Inoltre, un metodo simile può portare a problemi con il calcolo della posizione del blocco usando java-script "a. A volte, per compensare la perdita del 50% della larghezza dovuta all'uso della proprietà css di sinistra, la regola impostata su il blocco può aiutare: margin-right: -50%; .Parent ( width: 100%; height: 100%; position: fixed; top: 0; left: 0; overflow: auto; ) .block ( position: absolute; top: 50%; left: 50%; transform: translate( -50%, -50%); img ( display: blocco; ) )
Opzione 7. Pulsante.
Opzione utente dove bloccare avvolto in un'etichetta pulsante. Il pulsante ha la capacità di centrare tutto ciò che è al suo interno, ovvero gli elementi del modello line e block-line (inline-block). Non lo consiglio in pratica.Parent ( larghezza: 100%; altezza: 100%; posizione: assoluta; in alto: 0; sinistra: 0; overflow: auto; sfondo: nessuno; bordo: nessuno; contorno: nessuno; ) .block ( display: inline-block; img ( display: blocco;; bordo: nessuno; ) )
Bonus
Usando l'idea della 4a opzione, puoi impostare i margini per bloccare, e nel contempo questi ultimi verranno adeguatamente visualizzati nell'ambiente delle barre di scorrimento.
Esempio: jsfiddle.net/serdidg/nfqg9rza/2 .Puoi anche allineare l'immagine al centro e se l'immagine è più grande genitore, ridimensionalo a misura genitore.
Esempio: jsfiddle.net/serdidg/nfqg9rza/3 .
Esempio di immagine grande: - #lato
