HTML5 e allineamento verticale? Risolto ora?

Vengo dal mondo e ho cercato risorse su google riguardo la creazione di più wrapper per allineare verticalmente i contenuti, tuttavia sembra che sia davvero brutto.HTML5 e allineamento verticale? Risolto ora?

C'è un modo più semplice ora con HTML5? Esiste una sorta di implementazione che utilizza qualcosa come la mentalità HBox/VBox? Ho visto che ci sono esempi per i browser non-ie - c'è un modo conforme?

Come diavolo fa a chiunque sia sano di mente fare HTML ora? È un disastro!

//// EDIT

ho finalmente capito come allineare verticalmente un'intera scatola su uno schermo, come sto cercando di capire come voci di elenco in verticale del centro.

Ho provato due metodi per allineare questo html:

<nav> 
    <ul> 
     <li><a href="#!/home">Home</a></li> 
     <li><a href="#!/link1">Link #1</a></li> 
    </ul> 
</nav>

una utilizzando display: inline, l'altro utilizzando float: left (all'interno di un contenitore). Quando si utilizza in linea, sembra che le voci dell'elenco ignorino l'altezza: css e quando si utilizza float :, i collegamenti all'interno di li non si allineano verticalmente. Devo posizionare i div all'interno dei li per posizionarli verticalmente al centro?

fonte

2010-08-25 ansiart

Gli elementi che hanno 'display: inline;' non possono avere larghezza. Usa 'display: inline-block;' per quello. Inoltre, intendevi "l'altro usando' float: right' "? ... e "i collegamenti all'interno di li non allineano verticalmente" intendi "i collegamenti all'interno di li non si centrano verticalmente"? –

Perché non provare a utilizzare display: box con box-align:center, questo è CSS3, per cui non tutti i browser supporta ancora (solo Chrome, Firefox e Safari)

http://www.w3schools.com/cssref/css3_pr_box-align.asp

fonte

2011-11-21 07:39:20 Goodwine

Flexbox è seriamente nuovo. Le specifiche non sono ancora state fatte (al momento in cui scrivo). È bello imparare a usarlo, ma non è utile in natura. http://caniuse.com/#feat=flexbox –

@PatrikAlienus Beh, stava chiedendo specificamente se HTML5 avesse una soluzione. Ho anche detto che non tutti i browser lo supportano.Dipende davvero da cosa vuoi fare, se hai persone che usano vecchi browser non puoi utilizzare la maggior parte di HMTL5. IMO, non mi preoccuperei di renderlo compatibile con IE perché per fortuna IE10 sta uscendo, l'unica eccezione sarebbe se la tua base di utenti di oldie IE fosse abbastanza grande. – Goodwine

HTML5! = CSS3. Ma certo, immagino che HTML5 e CSS3 andranno insieme, ma non è necessario. Anche se IE10 è fuori, la storia ci dice che dobbiamo supportare IE8 per un lungo periodo di tempo a causa di tempi di adozione immensamente lenti da parte degli utenti di IE. E comunque; Puoi ** ottenere molto da HTML5 per i browser meno recenti utilizzando HTML5 shiv e Modernizr. Mi piace il modo "puritano" di fare le cose tanto quanto il prossimo, ma so che senza shiv e Modernizr l'efficacia del sito diminuirà e la conversione diminuirà. –

HTML5 non ha nulla a che fare con il layout degli elementi, come ad esempio l'allineamento verticale del contenuto. Come prima, il markup è disegnato da CSS.

CSS è una specifica completamente diversa da HTML5, quindi no, non è cambiato nulla.

Se si verificano problemi nell'implementazione di un layout specifico, quindi fare una domanda specifica, e possiamo probabilmente aiutare.

fonte

2010-08-25 17:45:38

aggiornato con una domanda reale. – ansiart

alcune persone, e tutto il clamore, si riferiscono a HTML5 per significare; HTML5, CSS3 e Javascript (1.8?). Qualche indicazione di questa caratteristica è disponibile in CSS3? – andho

È possibile rendere la proprietà altezza riga uguale all'altezza dei LI con display: blocco in linea per i LI. Quando lo fai, il testo sarà nel mezzo della linea, la linea avrà la stessa altezza della LI, il testo sarà verticalmente nel mezzo.

fonte

2011-02-08 16:29:26 andho

è possibile impostare un elemento esterno per visualizzare: tabella e un elemento interno da visualizzare: tabella-cella. quindi, sull'elemento tabella-cella, imposta allineamento verticale: medio; tutto il suo contenuto sarà centrato verticalmente.

Non funzionerà su IE7 e prima però, ma hey, a chi importa?

fonte

2011-12-09 13:44:59 Stratboy

HTML5 e allineamento verticale? Risolto ora?

risposta

Problemi correlati