Il modo migliore per creare un div con Label: Textbox e averlo ben centrato?

Question

Qual è il modo migliore per avere quanto segue?

Name:  [Textbox]

All'interno di un div? Trovo che il nome: la parte non sia ben centrata con la casella di testo, specialmente con un carattere piccolo. Voglio che il nome: la parte sia centrata verticalmente.

In alcuni casi, la parte della mano sinistra può essere piuttosto lunga e avvolgersi su più righe, in questo modo:

All known
addresses:   [Textbox]

Ancora una volta, vorrei che la parte della mano sinistra fosse ben centrata.

Sto cercando di smettere di usare le tabelle per il layout e passare alle div in modo da poter fare le cose correttamente, ma sto riscontrando alcuni problemi. style="vertical-align:middle" non sembra fare nulla.

Answer 1

Non esiste un buono modo per farlo. C'è un discreto writeup su alcuni metodi qui , ma la maggior parte di essi fa affidamento hackerando elementi ad altezza fissa o usando layout di tabelle / celle su div.

Se avere le cose centrate è un requisito difficile, mi limiterei a rinunciare e utilizzare le tabelle

Answer 2

usa tabelle o 2 div: uno per l'etichetta e un altro per la tua casella di testo, così sarai in grado di allinearli correttamente.

Answer 3

HTML5 ci sta offrendo alcune funzioni piuttosto interessanti per aiutare in questo tipo di istanze. Elementi come <section> e <article> possono essere molto utili a seconda delle circostanze.

http://www.w3schools.com/html/html5_new_elements.asp