¡Descarga Alineamiento de inline boxes en CSS: 'text-align' y 'vertical-align' y más Resúmenes en PDF de Informática solo en Docsity!
En esencia, el diseño CSS consiste en asignar un conjunto de elementos HTML a un conjunto de cuadros rectangulares que se pueden colocar en los ejes x, y y z.
El posicionamiento de los ejes x e y de estos cuadros está determinado por el esquema de posicionamiento que se aplica a los cuadros. En este capítulo, cubriré los esquemas de posicionamiento introducidos en CSS 2.1: flujo normal, flotadores y posicionamiento absoluto.
Conceptualmente, la abstracción de más alto nivel para el diseño CSS es el esquema de posicionamiento. Una vez que se ha determinado un esquema de posicionamiento, puede modificarse aún más mediante modos de diseño específicos, como display: table o display: inline-table. Incluso las extensiones CSS 3, que introdujeron modos de diseño como flexbox y grid, todavía existen dentro de uno de los principales esquemas de posicionamiento (por ejemplo, display: flex vs. display: inline- flex ).
CSS 2.1 define tres esquemas de posicionamiento, que son:
flujo normal, que consta de tres contextos de formato: el bloque, los contextos de formato en línea y relativos flotantes, que interactúan con el flujo normal a su manera y forman la base de los marcos de cuadrícula CSS más modernos Posicionamiento absoluto, que trata con elementos absolutos y fijos en relación con el flujo normal.
El esquema de posicionamiento tiene un gran impacto en el posicionamiento de los ejes x e y de los elementos. La Sección 9.3 de la especificación CSS 2. describe las interacciones entre estas tres propiedades, pero la versión corta es que todos los elementos pertenecen al flujo normal de forma
Aprender diseño CSS
la forma pedante
1. Posicionamiento de caja en CSS
Esquemas de posicionamiento
predeterminada a menos que se eliminen específicamente del flujo normal, generalmente al establecer la float propiedad o la position propiedad.
Atributo Valor por defecto
Propósito
monitor bloque o en línea Determina el algoritmo de diseño a usar posición estático Controla el posicionamiento del elemento. flotador ninguna Permite que otros elementos floten alrededor del elemento
Tanto los flotadores como el posicionamiento absoluto se pueden entender mejor a través de cómo interactúan con el flujo normal, por lo que cubriré primero el esquema de posicionamiento del flujo normal.
Si lo piensa, en realidad hay dos aspectos del diseño que están en juego:
cómo se clasifica y alinea el cuadro de un elemento, que está controlado principalmente por la display propiedad (y width , height y margin ). cómo los elementos dentro de un elemento padre particular se posicionan uno con respecto al otro
En este capítulo, me centraré en el último aspecto: el posicionamiento relativo. El siguiente capítulo cubre el modelo de caja, que determina la alineación y el tamaño.
El posicionamiento relativo de los elementos dentro de un elemento primario es controlada por el contexto de formato establecido para todos los elementos secundarios inmediatos de un elemento padre en particular, que a su flujo normal puede ser una block o inline de formato contexto.
Esto es lo que dice la especificación CSS 2.1 sobre el contexto de formato:
Los cuadros en el flujo normal pertenecen a un contexto de formato, que puede ser bloqueado o en línea, pero no ambos a la vez. Los cuadros de nivel de bloque participan en un contexto de formato de bloque. Los cuadros de nivel en línea participan en un contexto de formato en línea. Fuente
El padre (contenedor) establece el contexto de formato para sus hijos en función de si los cuadros secundarios se consideran de nivel en línea o de bloque. Los términos nivel en línea y nivel de bloque se definen para resaltar
nivel en línea generan cuadros de nivel en línea, que son cuadros que participan en un contexto de formato en línea.
Un cuadro en línea es uno que está a nivel de línea y cuyos contenidos participan en su contexto de formato en línea. Un elemento no reemplazado con un valor de 'visualización' de 'en línea' genera un cuadro en línea. Los cuadros de nivel en línea que no son cuadros en línea (como elementos de nivel en línea reemplazados, elementos de bloque en línea y elementos de tabla en línea) se denominan cuadros de nivel atómico en línea porque participan en su contexto de formato en línea como un cuadro opaco único. Fuente
Realmente no hablaré sobre elementos reemplazados versus no reemplazados, ya que es una distinción bastante menor. La forma más fácil de pensar en los elementos reemplazados es pensar en un elemento img o video , es decir, un elemento que simplemente tiene un contenido único (definido externamente) que no se puede dividir en líneas como el contenido de texto.
Puede pensar aproximadamente en los dos contextos de formato en el flujo normal para corresponder al apilamiento vertical (cuando está en un contexto de formato de bloque) y al apilamiento horizontal (cuando está en un contexto de formato en línea). Cubriré ambos en un momento.
Lo interesante de las definiciones anteriores es que el contexto de formato de cada cuadro debe ser "contexto de formato en línea" o "contexto de formato de bloque". Es decir, todos los elementos secundarios se presentan utilizando un tipo de contexto de formato para cada elemento primario. ¿Cómo puede ser esto, cuando puedes mezclar claramente contenido a nivel de bloque como divs y contenido a nivel de línea como texto? La respuesta es que existe un mecanismo por el cual los elementos de nivel en línea se pueden promover a elementos de nivel de bloque. Este mecanismo se conoce como generación de caja anónima.
La generación de cuadros anónimos se utiliza para tratar casos en los que un elemento primario contiene una mezcla de elementos secundarios en línea y elementos secundarios en bloque (en cuyo caso se generan "cuadros en bloque anónimos") y casos en los que el marcado contiene elementos de nivel
Generación de caja anónima
en línea mezclados con texto circundante (en cuyo caso se generan "cuadros en línea anónimos"), como una etiqueta em o una i etiqueta dentro de un párrafo de texto.
La especificación da un ejemplo de generación de cuadro de bloque anónimo:
Y afirma que:
si una caja de contenedor de bloque (como la generada para el DIV anterior) tiene una caja de nivel de bloque dentro de ella (como la P de arriba), entonces la forzamos a tener solo cajas de nivel de bloque dentro de ella.
Por ejemplo, la especificación proporciona la siguiente ilustración de cómo el código de ejemplo da como resultado cuadros anónimos que envuelven el contenido de nivel en línea:
Cuando un cuadro en línea contiene un cuadro de nivel de bloque en flujo, el cuadro en línea (y sus antepasados en línea dentro del mismo cuadro de línea) se dividen alrededor del cuadro de nivel de bloque (y cualquier hermano de nivel de bloque que sean consecutivos o separados solo por espacios en blanco plegables y / o elementos fuera de flujo), dividiendo el cuadro en línea en dos cuadros (incluso si alguno de los lados está vacío), uno a cada lado de los cuadros de nivel de bloque. Los cuadros de línea antes del
Cajas de bloque anónimas
contextos de formato en flujo normal corresponden aproximadamente al apilamiento vertical y al apilamiento horizontal.
La especificación proporciona una muy buena descripción de cómo funciona el diseño en un contexto de formato de bloque:
En un contexto de formato de bloque, los cuadros se colocan uno tras otro, verticalmente, comenzando en la parte superior de un bloque contenedor. La distancia vertical entre dos cuadros hermanos está determinada por las propiedades de 'margen'. Márgenes verticales entre cuadros adyacentes a nivel de bloque en un colapso del contexto de formato de bloque.
En un contexto de formato de bloque, el borde exterior izquierdo de cada cuadro toca el borde izquierdo del bloque contenedor (para el formato de derecha a izquierda, toque el borde derecho). Esto es cierto incluso en presencia de flotadores (aunque los recuadros de línea de una caja pueden reducirse debido a los flotadores), a menos que el recuadro establezca un nuevo contexto de formato de bloque (en cuyo caso el recuadro en sí mismo puede volverse más estrecho debido a los flotadores). fuente
Las dos conclusiones más importantes son que en un contexto de formato de caja, las cajas se disponen verticalmente y que el borde exterior izquierdo de cada caja tocará el borde exterior izquierdo del bloque contenedor (incluso en presencia de flotadores).
El siguiente ejemplo de código ilustra algunas de estas reglas:
.float { float: left; } .foo { padding-top: 10px; } .bar { width: 30%; } .baz { width: 40%; }
Flujo normal: formato de bloque
En el ejemplo anterior:
cada cuadro de bloque está en el borde exterior izquierdo del bloque contenedor la presencia de un flotador no influye en la posición del borde exterior izquierdo (por especificación) de ninguna manera, excepto para compensar el texto el cuadro de bloque foo (que no tiene un ancho establecido) se expande al ancho del contenedor completo las otras dos cajas, que tienen anchos establecidos, se extienden desde el borde izquierdo del contenedor las otras dos cajas no se mueven de ninguna manera, aunque encajen, por ejemplo, en una sola fila
En general, el contexto de formato de bloque es bastante regular: se puede describir con un par de párrafos. Sin embargo, este no es el caso para el contexto de formato en línea.
El contexto de formato en línea es un poco más complicado, ya que implica dividir el contenido en cuadros de línea , otra construcción que no es directamente visible en el marcado, sino que se genera en función del diseño del contenido:
float foo bar baz
Flujo normal: formateo en línea
Cuando un cuadro en línea excede el ancho de un cuadro de línea, se divide en varios cuadros y estos cuadros se distribuyen en varios cuadros de línea. Si un cuadro en línea no se puede dividir, [...] entonces el cuadro en línea desborda el cuadro de línea.
Cuando se divide un cuadro en línea, los márgenes, los bordes y el relleno no tienen efecto visual en el lugar donde se produce la división (o en cualquier división, cuando hay varias).
En otras palabras, cuando los cuadros en línea exceden el ancho de un cuadro de línea, se dividirá si es posible. Cuando las reglas no permiten dividir el cuadro, simplemente desbordará horizontalmente el cuadro de línea.
Quizás el aspecto más complicado del contexto de formato en línea es cómo funciona la alineación dentro de los cuadros de línea. Dos propiedades: text-align y vertical-align controlar la alineación.
La text-align propiedad controla cómo se colocan los cuadros de nivel en línea en un cuadro de línea.
Propiedad Valor por defecto Propósito texto alineado
un valor sin nombre que actúa como 'izquierda' si 'dirección' es 'ltr', 'derecha' si 'dirección' es 'rtl'
Describe cómo se alinea el contenido en línea de un contenedor de bloques.
Tenga en cuenta que solo se aplica cuando el cuadro de línea contiene algo de espacio no utilizado, y que no puede controlar directamente cómo se coloca el contenido en línea en los cuadros de línea. La especificación dice:
When the total width of the inline-level boxes on a line is less than the width of the line box containing them, their horizontal distribution within the line box is determined by the 'text-align' property. If that property has the value 'justify', the user agent may stretch spaces and words in inline boxes (but not inline-table and inline-block boxes) as well. source
Alineación horizontal dentro de cuadros de línea: text-
align
In other words, the text-align property is applied after the inline content has been distributed across line boxes.
A block of text is a stack of line boxes. In the case of 'left', 'right' and 'center', this property specifies how the inline-level boxes within each line box align with respect to the line box's left and right sides; alignment is not with respect to the viewport. In the case of 'justify', this property specifies that the inline-level boxes are to be made flush with both sides of the line box if possible, by expanding or contracting the contents of inline boxes, else aligned as for the initial value. (See also 'letter-spacing' and 'word-spacing'.) source
Normally, whitespace (spaces, tabs etc.) can be affected by justification. However:
If an element has a computed value for 'white-space' of 'pre' or 'pre-wrap', then neither the glyphs of that element's text content nor its white space may be altered for the purpose of justification.
The following two properties control vertical alignment within line boxes:
Property Default value Purpose vertical- align
baseline Controls the vertical alignment of boxes. Only applies to inline (and table-cell) boxes. line- height
normal (~1.2 times font height)
Specifies the height that is used to calculate line box height.
vertical-align controls the vertical alignment of inline boxes within line boxes - not the vertical alignment of the line boxes themselves. Of course, to understand how inline boxes are positioned you also need to know how height is calculated both for the line box as well as the inline boxes themselves.
The line box height is determined by two factors:
the height of the inline boxes contained within it the alignment of the inline boxes contained within it
Vertical alignment within line boxes: vertical-align
line-height value
Description
The computed value of the property is this percentage multiplied by the element's computed font size. Negative values are illegal.
What happens if more than one font is used within a single inline box?
If more than one font is used (this could happen when glyphs are found in different fonts), the height of the content area is not defined by this specification. However, we suggest that the height is chosen such that the content area is just high enough for either (1) the em-boxes, or (2) the maximum ascenders and descenders, of all the fonts in the element. [...]
The spec does not define the value, but the recommendation is that it is large enough for all fonts used (e.g. the maximum among the font heights).
The alignment of the inline boxes is determined by the vertical-align property. There are two sets of values, the first set being relative to the parent's font baseline, content area, or font-defined positions such as sub and super.
vertical- align value
Description
baseline Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline. middle Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent. sub Lower the baseline of the box to the proper position for subscripts of the parent's box. super Raise the baseline of the box to the proper position for superscripts of the parent's box. text-top Align the top of the box with the top of the parent's content area (see 10.6.1). text-bottom Align the bottom of the box with the bottom of the parent's content area (see 10.6.1).
vertical- align value
Description
Raise (positive value) or lower (negative value) the box by this distance (a percentage of the 'line-height' value). The value '0%' means the same as 'baseline'. Raise (positive value) or lower (negative value) the box by this distance. The value '0cm' means the same as 'baseline'.
The second set of values are defined relative to the parent's line box, which itself is defined by the vertical-align of other elements. This is a recursive definition, since the height of the line box depends on the vertical alignment and the vertical alignment depends on the line box height. This means that boxes with these special values are positioned only after the line box height has been calculated based on the inline box sizes and alignments defined earlier. These two values for vertical-align are:
vertical-align value
Description
top Align the top of the aligned subtree with the top of the line box. bottom Align the bottom of the aligned subtree with the bottom of the line box.
To recap, inline boxes have:
a font size, which determines the size of the text glyphs a line height, which determines the height of the inline box (in absolute terms or relative to the font size) a baseline, which is a position defined by the font, and on which the bottom edges of most glyphs / characters are aligned (excluding characters such as q and g, which have descenders/ascenders - parts that extend below/above the baseline alignment)
The line box height is calculated after calculating the heights of every inline box in it, and then applying all vertical-align alignments other than vertical-align: top and vertical-align: bottom.
Each line box has:
a font size, which is inherited from the parent
even though the first parent element does not contain any text by itself, the baseline and the minimal line height of the line boxes inside that parent element is defined by the font size set on the parent element. The first child element's baseline is aligned with the parent's baseline. The parent's baseline is based on the font size set on the parent element even though the parent contains no text that uses that font size. This is the "strut" mechanism in action, where the parent baseline is defined by an invisible, zero-width inline box with the element's font and line height properties. Next, a series of vertical-align: super inline elements gradually shift the baseline, which could increase the line height further (in this case it does not because the parent font is so large). This illustrates how alignment can increase line box height. Finally, the span with "super-parent" is on the same level as the first "child" element, so its baseline is shifted according to the parent's font size's super position, which appears much higher than the other two super -aligned inline elements because the parent font size larger than the child font size.
Note that many of the vertical-align values are relative to the parent element's baseline - which is determined by the font metrics and font size of the parent element. For example, the chain of vertical-align: super elements gradually shifts the baseline upwards.
Note that tables also have a vertical-align property, but it works differently in the context of tables.
The next example illustrates how the inline-block vertical centering technique works (based on this page). The inline-block centering technique is one of many methods that allow you vertically (and horizontally) center an element. Because it uses an inline formatting context and the vertical- align property, it provides a good practical example of how these properties are used.
.container { text-align: center; overflow: auto; height: 120px; }
.container:after, .block { display: inline-block;
vertical-align: middle; }
.container:after { content: ''; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font / width: 10px; / to show the inserted pseudo element / background-color: lightgreen; / to show the inserted pseudo element */ }
.block { max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ }
I've added a couple of additional styles to better show the different parts that allow this technique for vertical centering to work. As you can see in the example above:
the inner blocks inside the container are display: inline-block , meaning they are treated as inline-level boxes and produce an inline formatting context, but their contents behave like display: block elements (for example, setting width: 100% works!). the container has text-align: center to cause the inline-level blocks to be centered on each line box. the content block has vertical-align: middle set on it, which aligns it vertically relative to all the other content on the line box. a pseudo-element with height: 100% is added to the end of the container. It is shown in green. This is necessary because without it, the content block would simply be positioned at the top of the flow, because it would exist on
Centered
The problem here is that the whitespace between the two divs causes an anonymous inline box to be generated. With the anonymous inline box, the contents of the line box add up to more than 100% of the available width of the parent, causing a second line box to be created.
There are a couple of solutions to this problem:
one way to fix this is to eliminate the whitespace between the two divs, e.g. ...
