css - texto - tipos de alineacion en word

¿Cuál es el trato con la alineación vertical: línea de base?

Question

Pensé que conocía CSS, pero necesitaba explicarle algo a alguien ahora mismo y descubrí que no podía.

Mi pregunta básicamente se reduce a: ¿por qué se ignora la vertical-align:baseline cuando hay otras alineaciones en la misma línea?

Ejemplo: si el segundo intervalo tiene vertical-align:bottom , la alineación vertical del primer span se ignora si es la baseline ; Se comporta como si tuviera bottom también.

span:first-child {vertical-align:baseline}
span:last-child {font-size:3em; vertical-align:bottom;}

<p>
  <span>one</span> <span>two</span>
</p>

Mientras que si todos los tramos tienen una alineación vertical distinta de la baseline de baseline o, si todos son de baseline , entonces se comportan como se espera.

span:first-child {vertical-align:top}
span:last-child {font-size:3em; vertical-align:bottom;}

<p>
  <span>one</span> <span>two</span>
</p>

span:first-child {vertical-align:baseline}
span:last-child {font-size:3em; vertical-align:baseline;}

<p>
  <span>one</span> <span>two</span>
</p>

Si este es un comportamiento normal, ¿por qué no se describe en ninguna parte? No he encontrado ninguna fuente que diga que la línea de base y la parte superior / inferior interfieran entre sí de tal manera.

Answer 1

Alineación vertical

vertical-align se utiliza para alinear elementos de nivel en línea . Estos son elementos, cuya propiedad de display evalúa como:

• inline
• inline-block
• inline-table (no considerada en esta respuesta)

Los elementos de nivel en línea están dispuestos uno al lado del otro en líneas. Una vez que hay más elementos que encajan en la línea actual, se crea una nueva línea debajo de ella. Todas estas líneas tienen un llamado cuadro de línea , que encierra todo el contenido de su línea. Contenido de tamaño diferente significa cajas de líneas de diferente altura.

En la siguiente ilustración, la parte superior e inferior de los cuadros de línea se indican mediante líneas rojas.

Dentro de estas cajas de líneas, la propiedad vertical-align es responsable de alinear los elementos individuales.

Base

El punto de referencia más importante para alinear verticalmente es la línea de base de los elementos involucrados. En algunos casos, el borde superior e inferior de la caja de cierre del elemento también se vuelve importante.

Elementos en linea

El borde superior e inferior de la altura de la línea se indica con líneas rojas, la altura de la fuente con líneas verdes y la línea de base con una línea azul.

A la izquierda , el texto tiene una altura de línea establecida en la misma altura que el tamaño de fuente. La línea verde y roja se colapsó en una línea en cada lado.

En el medio , la altura de la línea es dos veces más grande que el tamaño de la fuente.

A la derecha , la altura de la línea es la mitad del tamaño de la fuente.

Tenga en cuenta que los bordes exteriores del elemento en línea (las líneas rojas) no importan, si la altura de la línea es menor que la altura de la fuente.

Elemento de bloque en línea

De izquierda a derecha ves:

• un elemento de inline-block con contenido in-flow

• un elemento de inline-block con contenido in-flow y overflow: hidden

• un elemento de inline-block sin contenido in-flow (pero el área de contenido tiene una altura)

Los límites del margen se indican mediante líneas rojas, el borde es amarillo, el relleno verde y el área de contenido azul. La línea de base de cada elemento de inline-block se muestra como una línea azul.

La inline-block de base del elemento del inline-block en línea depende de si el elemento tiene contenido in-flow . En caso de:

• contenido in-flow la línea de base del elemento de inline-block es la línea de base del último elemento de contenido en flujo normal ( ejemplo a la izquierda )

• contenido in-flow , pero una propiedad de overflow evalúa como algo que no es visible, la línea de base es el borde inferior del cuadro de margen ( ejemplo en el medio )

• sin contenido in-flow , la línea de base es, nuevamente, el borde inferior del cuadro de margen ( ejemplo a la derecha )

Caja de línea

Esta es probablemente la parte más confusa, cuando se trabaja con vertical-align . Esto significa que la línea de base se coloca donde sea necesario para cumplir con todas las demás condiciones, como vertical-align y minimizar la altura de la caja de la línea. Es un parámetro libre en la ecuación.

Dado que la línea de base de la caja de línea es invisible, puede que no sea inmediatamente obvio dónde está. Pero, puedes hacerlo visible muy fácilmente. Simplemente agregue un carácter al principio de la línea en las preguntas, como la "x" en la figura. Si este carácter no está alineado de ninguna manera, se ubicará en la línea de base de forma predeterminada.

Alrededor de su línea de base, el cuadro de línea tiene lo que podríamos llamar su cuadro de texto (líneas verdes en la figura). El cuadro de texto puede considerarse simplemente como un elemento en línea dentro del cuadro de línea sin ninguna alineación. Su altura es igual al font-size de font-size de su elemento padre. Por lo tanto, el cuadro de texto solo encierra el texto sin formato del cuadro de línea. Dado que este cuadro de texto está vinculado a la línea de base, se mueve cuando se mueve la línea de base.

Retazo

Si quieres hacer un experimento con varias vertical-align y font-size aquí tienes un fragmento donde puedes probarlo. También está disponible en JSFiddle .

let sl1 = document.getElementById(''sl1'');
let sl2 = document.getElementById(''sl2'');
let sl3 = document.getElementById(''sl3'');
let sl4 = document.getElementById(''sl4'');
let elm1 = document.getElementById(''elm1'');
let elm2 = document.getElementById(''elm2'');
let elm3 = document.getElementById(''elm3'');
let elm4 = document.getElementById(''elm4'');
let ip1 = document.getElementById(''ip1'');
let ip2 = document.getElementById(''ip2'');
let ip3 = document.getElementById(''ip3'');
let ip4 = document.getElementById(''ip4'');
let slArr = [sl1, sl2, sl3, sl4];
let elmArr = [elm1, elm2, elm3, elm4];
let ipArr = [ip1, ip2, ip3, ip4];
let valueArr = [''baseline'', ''top'', ''middle'', ''bottom''];
for (let i = 0; i < slArr.length; i++) {
  slArr[i].addEventListener(''change'', (event) => {
    elmArr[i].style.verticalAlign = event.target.value;
    elmArr[i].innerHTML = event.target.value;
    addDiv();
  })
}
for (let i = 0; i < ipArr.length; i++) {
  ipArr[i].addEventListener(''change'', (event) => {
    elmArr[i].style.fontSize = event.target.value + ''em'';
    addDiv();
  })
}

document.getElementById(''btnRandom'').addEventListener(''click'', () => {
  for (let i = 0; i < elmArr.length; i++) {
    let element = elmArr[i];
    let fontSize = Math.floor(Math.random() * 4 + 1);
    ipArr[i].value = fontSize;
    element.style.fontSize = fontSize + ''em'';
    let styleIndex = Math.floor(Math.random() * 4);
    element.style.verticalAlign = valueArr[styleIndex];
    element.innerHTML = valueArr[styleIndex];
    slArr[i].selectedIndex = styleIndex;
  }
}, this);

function addDiv() {
  let view = document.getElementById(''viewer'');
  view.innerHTML = "";
  elmArr.forEach(function(element) {
    let div = document.createElement(''div'');
    div.appendChild(element.cloneNode());
    view.appendChild(div);
  }, this);
}

.header span {
  color: #000;
}

select {
  width: 100px;
}

#elms {
  border: solid 1px #000;
  margin-top: 20px;
  position: relative;
}

span {
  color: #FFF;
  font-size: 1em;
}

#elm1 {
  background-color: #300;
}

#elm2 {
  background-color: #6B0;
}

#elm3 {
  background-color: #90A;
}

#elm4 {
  background-color: #B00;
}

div {
  z-index: -1;
}

#div1 {
  width: 100%;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 25%;
}

#div2 {
  width: 100%;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 50%;
}

#div3 {
  width: 100%;
  height: 1px;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 75%;
}

<div class="header"> <span style="width: 100px;display: block;float: left;margin-right: 20px;">vertical align</span> <span>font-size(em)</span> </div>
<div>

  <select name="sl1" id="sl1">
    <option value="baseline">baseline</option>
    <option value="top">top</option>
    <option value="middle">middle</option>
    <option value="bottom">bottom</option>
  </select>
  <input type="number" value="1" id="ip1" />
  <br>
  <select name="sl2" id="sl2">
    <option value="baseline">baseline</option>
    <option value="top">top</option>
    <option value="middle">middle</option>
    <option value="bottom">bottom</option>
  </select>
  <input type="number" value="1" id="ip2" />
  <br>
  <select name="sl3" id="sl3">
    <option value="baseline">baseline</option>
    <option value="top">top</option>
    <option value="middle">middle</option>
    <option value="bottom">bottom</option>
  </select>
  <input type="number" value="1" id="ip3" />
  <br>
  <select name="sl4" id="sl4">
    <option value="baseline">baseline</option>
    <option value="top">top</option>
    <option value="middle">middle</option>
    <option value="bottom">bottom</option>
  </select>
  <input type="number" value="1" id="ip4" />
  <br>
  <button id="btnRandom" (onclick)="random()">Random</button>
</div>
<div id="elms">
  <span id="elm1">one</span>
  <span id="elm2">two</span>
  <span id="elm3">three</span>
  <span id="elm4">four</span>
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>
<div id="viewer"></div>

Este fragmento está hecho por Duannx .

_{Fuente: Tenga en cuenta que este es un extracto de Vertical-Align: todo lo que necesita saber, escrito por Christopher Aue.}

Answer 2

La pregunta es por qué se vertical-align: baseline; ignorado Bueno, no creo que lo sea. En su primer fragmento de código, está utilizando la baseline y la bottom lo que claramente da una diferencia entre los dos elementos <span> . Entonces, ¿qué hace la baseline ? baseline pozo Alinea la línea base del elemento con la línea base del elemento padre. En el siguiente ejemplo, he copiado y ajustado algunas partes para dar la diferencia.

span.one {vertical-align:baseline}
span.two {vertical-align:middle;}

<p>
  <span class="one">one</span> <span class="two">two</span>
</p>

Como puede ver, la alineación de la baseline actúa de manera normal al igual que la alineación del middle

Ahora vamos a probar algo más. permite intercambiar la alineación de la baseline de baseline y del middle y editar el middle y agregar una tercera <span>

span.one { vertical-align: top;}
span.two { vertical-align: baseline;}

span.three {vertical-align: middle; height: 20px; }
p {
height: 50px;
background-color: grey;
}

<p>
  <span class="one">one</span> <span class="two">two</span> <span class="two">two</span><br><br> <span class="three">three</span>
</p>

Ahora, si edita el segundo fragmento y observa la vertical-align de <span class="three"> , puede ver claramente que al cambiar la alineación, el texto cambia su posición.

Pero su pregunta se relaciona con el texto en la misma línea, así que echemos un vistazo al fragmento que se encuentra abajo.

span.one { vertical-align: middle;}
span.two { vertical-align: baseline;}

span.three {vertical-align: middle; height: 20px; }
p {
height: 50px;
background-color: grey;
}

<p>
  <span class="one">one</span> <span class="two">two</span> <span class="two">two</span><span class="three">three</span>
</p>

Como puede ver en este tercer fragmento, he colocado el tercer <span> lado de uno y dos. Y hace una diferencia. La baseline de baseline en este caso es diferente de la alineación del middle . Esto se debe a que la baseline captura la baseline de baseline del padre. ya que la altura de los padres es normal, no afecta la baseline y la alineación top . pero cuando usas el middle o el sub es claramente una diferencia.

Para obtener información sobre cada alineación, echa un vistazo a este link .