HTML5 y alineación vertical? Solucionado ahora?

Vengo del mundo, y he estado buscando recursos en google sobre cómo hacer múltiples envoltorios para alinear el contenido verticalmente, sin embargo, parece que es realmente feo.HTML5 y alineación vertical? Solucionado ahora?

¿Hay una manera más fácil ahora con HTML5? ¿Hay algún tipo de implementación que utiliza algo así como la mentalidad HBox/VBox? Vi que hay ejemplos para navegadores que no son, es decir, ¿hay una forma compatible?

¿Cómo diablos alguien en su sano juicio hace HTML ahora? ¡Es un desastre!

//// EDITAR

fin he descubierto la manera de alinear verticalmente una caja entera a través de una pantalla, la forma en que estoy pensando cómo elementos de la lista de centros verticalmente.

He intentado dos métodos para alinear esta html:

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

uno usando display: inline, el otro usando float: a la izquierda (dentro de un recipiente). Cuando se utiliza en línea, parece que los elementos de la lista ignoran la altura: css, y cuando se usa float :, los enlaces dentro del li no se alinean verticalmente. ¿Debo colocar div's dentro de los li's para que también se centren verticalmente?

Fuente

2010-08-25 ansiart

Los elementos que tienen 'display: inline;' no pueden tener ancho. Use 'display: inline-block;' para eso. Además, ¿te refieres a "el otro usando' float: right' "? ... y por "los enlaces dentro del li no se alinean verticalmente" ¿quiere decir "los enlaces dentro del li no se centran verticalmente"? –

¿Por qué no intenta usar display: box con box-align:center, esto es CSS3, por lo que no todos los navegadores soporta todavía (sólo Chrome, Firefox y Safari)

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

Fuente

2011-11-21 07:39:20 Goodwine

Flexbox es realmente nuevo. La especificación aún no está hecha (a partir de este escrito). Es bueno aprender a usarlo, pero no es útil en la naturaleza. http://caniuse.com/#feat=flexbox –

@PatrikAlienus Bueno, él estaba preguntando específicamente si HTML5 tenía una solución. También mencioné que no todos los navegadores lo admiten.Realmente depende de lo que quieras hacer, si tienes personas que usan navegadores viejos, entonces no puedes usar la mayoría de HMTL5. IMO, no me molestaría en hacerlo compatible con IE porque afortunadamente IE10 está saliendo, la única excepción sería si su base de usuarios de Oldie IE es tranquilamente grande. – Goodwine

HTML5! = CSS3. Pero claro, supongo que HTML5 y CSS3 van de la mano, pero no es necesario. A pesar de que IE10 está fuera, la historia nos dice que tenemos que soportar IE8 por mucho tiempo debido al tiempo de adopción extremadamente lento de los usuarios de IE. Y por cierto; ** Puede obtener ** mucho de HTML5 para navegadores más antiguos al utilizar HTML5 shiv y Modernizr. Me gusta la forma "puritana" de hacer las cosas tanto como el próximo tipo, pero sé que sin shiv y Modernizr la efectividad del sitio disminuirá y la conversión disminuirá. –

HTML5 realmente no tiene nada que ver con el diseño del elemento, como el alineamiento vertical del contenido. Como antes, el marcado está diseñado por CSS.

CSS es una especificación totalmente diferente de HTML5, por lo que no, nada ha cambiado.

Si tiene problemas para implementar un diseño específico, haga una pregunta específica, y probablemente podamos ayudarlo.

Fuente

2010-08-25 17:45:38

actualizado con una pregunta real. – ansiart

algunas personas, y todo el bombo, se refieren a HTML5; HTML5, CSS3 y Javascript (1.8?). ¿Alguna indicación de que esta característica esté disponible en CSS3? – andho

Puede hacer que la propiedad de altura de línea sea igual a la altura de los LI con pantalla: bloque en línea para los LI. Cuando hagas esto, el texto estará en el medio de la línea, con la misma altura que el LI, el texto estará verticalmente en el medio.

Fuente

2011-02-08 16:29:26 andho

puede configurar un elemento exterior para mostrar: tabla y un elemento interno para mostrar: tabla-celda. luego, en el elemento de celda de tabla, establece vertical-align: middle; todos sus contenidos estarán centrados verticalmente.

No funcionará en IE7 y antes, pero, ¿a quién le importa?

Fuente

2011-12-09 13:44:59 Stratboy

HTML5 y alineación vertical? Solucionado ahora?

Respuesta

Cuestiones relacionadas