Google utilizza la tecnologia AI per tradurre i contenuti nella tua lingua preferita. Le traduzioni generate dall'AI potrebbero contenere errori.
Codelab: centratura in CSS
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Per seguire questo codelab, apri questo Glitch in una seconda scheda.
Questo codelab ti consente di condividere e mostrare il tuo modo preferito di centrare in
CSS.
Leggi il mio post del blog Centering in CSS per scoprire 5 dei miei modi preferiti per centrare gli elementi in CSS. Oppure guarda questo video.
Configurazione
Fai clic su Remixa per modificare per rendere il progetto modificabile.
Apri app/index.html
In line 23, sostituisci /* your centering CSS here /* con il tuo CSS
(Facoltativo) Assegna un nome alla tecnica di centratura e sostituisci il testo in <h1>
Stili
Crea un nuovo file nella cartella app/css/
Crea un selettore per contenere la soluzione di centratura, ad esempio .turbo-center o
[floaty-mcfloat]
All'interno del nuovo selettore, scrivi la tecnica di centratura (puoi prendere
come esempio le altre in app/css/)
(facoltativo) scrivi alcuni "stili di supporto" per vedere quali bambini hanno bisogno di
stili per supportare il centraggio
Apri app/css/index.css e importa il nuovo file in basso.
Tirare le somme
Apri di nuovo app/index.html
Trova <article> e inserisci il selettore personalizzato creato nel passaggio 2 della sezione precedente.
Inviami un tweet con il tuo Glitch e lo inserirò nel post del blog.
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0 , mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0 . Per ulteriori dettagli, consulta le norme del sito di Google Developers . Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2020-12-16 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2020-12-16 UTC."],[],[]]
