¿Para qué se usa la alineación vertical en CSS?

Soy nuevo en el mundo de la codificación y CSS y recientemente me encontré con la propiedad vertical-align. Después de leer varios artículos sobre lo que es, todavía no tengo ni idea de para qué sirve y cuándo lo usa.¿Para qué se usa la alineación vertical en CSS?

Según tengo entendido, se utiliza para elementos en línea como texto, imágenes, etc., así como para texto u otros elementos en línea en una tabla. No se pueden usar para elementos de bloque como div, h1, etc.

Si mi entendimiento es correcto, aparte de alinear el texto verticalmente para decir una imagen o usar subíndice o superíndice, ¿para qué sirve?

Fuente

2011-05-25 PeanutsMonkey

más a menudo lo uso para centrar el texto dentro de las células de una tabla, por defecto el texto es todo parte superior alineados en cada célula y se ve feo. –

Encuentro 'vertical-align' no es para nada útil, porque los elementos de nivel de bloque ignoran estúpidamente la propiedad. Sería grandioso si se pudiera usar para centrar verticalmente el contenido de un div, pero lamentablemente una persona de la torre de marfil decidió que eso no iba a ser. – aroth

Siempre vale la pena leer las especificaciones si usted quiere aprender acerca de una propiedad específica:
http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align
Un caso de uso común es vertical centrado (en combinación con display: table-cell):

http://jsfiddle.net/7eTb2/
```
div { 
    background: #ccc; 
    width: 200px; 
    height: 300px; 
    padding: 5px; 

    display: table-cell; 
    vertical-align: middle 
} 
```
Es algo diff icult al centro verticalmente sin usar esta técnica.
Otro caso de uso común es cuando se trata de elementos que son inline o inline-block.
Ver aquí para ver ejemplos de lo que sucede con los diferentes vertical-align valores: http://www.brunildo.org/test/inline-block.html
Otro buen enlace para leer: http://css-tricks.com/what-is-vertical-align/

Sin embargo, es utilidad real es cada vez me upvotes, consulte:

https://stackoverflow.com/search?tab=votes&q=user%3a405015%20%22vertical-align%3a%20top%22

Fuente

2011-05-25 23:05:21 thirtydot

Gracias por el ejemplo y los enlaces. Ya había leído el enlace "Hhat es alineación vertical", pero no estaba seguro de si mi comprensión era correcta. Inline-block es algo en lo que estoy leyendo, así que no tengo ni idea de cuándo los usaría, para qué sirven, etc., pero gracias por el enlace. – PeanutsMonkey

Alineación vertical es para lo que parece. Alinea el elemento verticalmente dentro del objeto principal; sin embargo, no todos los navegadores lo interpretan de la misma manera.

Here's información un poco más detallada sobre los valores de los parámetros disponibles.

Fuente

2011-05-25 23:00:51 akuta

@B. Burke: lo siento pero puedo dar más detalles sobre su respuesta ya que ya leí el enlace que publicó, pero aún no tiene sentido para mí. ¿Qué es un ejemplo de un objeto principal? – PeanutsMonkey

Absolutamente puedo elaborar: El objeto principal sería el objeto que contiene el elemento con el que está trabajando. Un ejemplo de esto sería un div con texto dentro. El div sería el objeto principal del elemento de texto. Si este div fuera el único objeto contenedor en la página, la etiqueta body sería el objeto padre del elemento div. ¿Tiene más sentido? Básicamente parece que está tratando de dar más detalles a un parámetro que no lo tiene. :) Hace exactamente lo que dice: Alinea los elementos verticalmente. – akuta

Un objeto principal puede ser cualquier elemento de nivel de bloque, pero imagínelo como un simple cuadrado en un pedazo de papel. Dibuja una línea horizontal a través del centro de ese cuadrado, y ahí es donde 'vertical-align' colocará lo que pongas dentro del cuadrado. – Dolph

De hecho, se utiliza la alineación vertical de elementos en línea. Los elementos de nivel de bloque ignorarán esta propiedad. Entonces tu comprensión es correcta.

This blog ofrece información básica sobre alineación vertical con algunos ejemplos. Se usa principalmente para colocar verticalmente una imagen en una línea de texto. O para reemplazar el atributo valign en tablecells.

Parece que lo estás entendiendo del todo bien. Consulte w3schools para obtener detalles sobre la propiedad de alineación vertical.

Solo para ser claro; no intente usar vertical-align para posicionar un elemento blocklevel como un div. No funcionará, como ya lo mencionó, es para elementos en línea como imágenes en una línea de texto. Usar display: table-cell; y alinear verticalmente en un elemento es un truco, use otras técnicas de CSS para alinear verticalmente las cosas en un div siempre que sea posible.

Fuente

2011-05-25 23:03:41

Gracias. Leí el enlace que publicó antes de mi pregunta. Entonces, ¿para qué vertical-align se usa es para colocar verticalmente una imagen en texto o texto en una imagen, así como para reemplazar el atributo valign en las celdas de tabla? También entiendo que el valor de propiedad predeterminado es línea de base. Si es así, ¿por qué usarlo en un archivo CSS de restablecimiento? Por ejemplo, en http://meyerweb.com/eric/tools/css/reset/reset.css – PeanutsMonkey

@ PeanutsMonkey: diferentes navegadores tienen diferentes valores predeterminados para diferentes elementos para 'vertical-align'. Establecerlo en 'línea de base' para" todos los elementos "puede ayudar a garantizar la coherencia. – thirtydot

Al usar un archivo reset.css, quiere estar absolutamente seguro de que todos los navegadores se comportan igual. Supongo que hay algunos navegadores que no usan línea base como configuración predeterminada para todos los elementos. Entonces el reset.css hará esto seguro para ti. –

align vertical, por el W3C y por la forma en la mayoría (tm) lo interpretan, sólo se usa/hace efecto en elementos que son de mesa células (<td>), y en algunos navegadores, elementos con la declaración display: table-cell.

El resto del tiempo, los navegadores no lo tienen en cuenta.

Fuente

2011-05-25 23:06:03 colinross

Otros han sido en su mayoría correctos acerca de alineación vertical. La realidad es que funciona, pero no cómo piensas. Es para elementos en línea, no para elementos de bloque.

En este caso, un violín vale más que mil palabras. :)

http://jsfiddle.net/JJfuj/

Fuente

2011-05-25 23:12:48 dtbarne

¿Para qué se usa la alineación vertical en CSS?

Respuesta

Cuestiones relacionadas