Mis elementos de bloque en línea no se alinean correctamente

82

Todos los elementos dentro .track-containerdeben alinearse bien y en línea, uno al lado del otro, restringidos por la altura de 200px que se les ha dado sin márgenes extraños ni relleno. En cambio, tienes la extrañeza que ocurre en el violín mencionado anteriormente.

¿Qué está causando .album-artworky .track-infopara quedarse relegados mitad de la página, y cómo puedo solucionarlo? Además, reconozco que una tabla puede ser una mejor manera de abordar toda esta configuración, pero quiero resolver el problema del código anterior para poder aprender de este error.

.track-container {
    padding:0;
    width: 600px;
    height: 200px;
    border: 1px solid black;
    list-style-type: none;
    margin-bottom: 10px;
}

.position-data {
    overflow: none;
    display: inline-block;
    width: 12.5%;
    height: 200px;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.current-position, .position-movement {
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.album-artwork {
    display: inline-block;
    height: 200px;
    width: 20%;
    border: 1px solid black;
}

.track-info {
    display: inline-block;
    padding-left: 10px;
    height: 200px;
    border: 1px solid black;
}
<div class="track-container">
    <div class="position-data">
        <div class="current-position">1</div>
        <div class="position-movement">2</div>
    </div>
    <div class="album-artwork">fdasfdsa</div>
    <div class="track-info">fdafdsa</div>
</div>
Expandir fragmento

Aquí hay un JSFiddle .

html css usuario1427661
fuente

Respuestas:

179

10.8 Cálculos de altura de línea: las propiedades 'line-height' y 'vertical-align'

En cuyo caso la línea de base es el borde del margen inferior.

Este es un problema común que involucra inline-blockelementos. En este caso, el valor predeterminado de la vertical-alignpropiedad es baseline. Si cambia el valor a top, se comportará como se esperaba.

Ejemplo actualizado

.position-data {
    vertical-align: top;
}
Josh Crozier
fuente
2
¡Gracias! He estado buscando durante años. Mi problema fue insertar html en elementos de bloque en línea, lo que afectó la posición vertical. Problema solo visible en Safari.
kapoko
2
He estado intentando todo, ¡hacer esto solucionó instantáneamente mi problema!
xorinzor
2
salvó mi día hermano
osyan
3
Pasé mucho tiempo en este problema ya que mi div interno no se alineaba en mi proyecto React. ¡Esto literalmente me ahorró horas!
SeaWarrior404
3
5 años después, todavía salvando vidas. ¡Gracias!
Seu Madruga
33

Los elementos del interior .track-containerson cuadros de nivel en línea en el mismo cuadro de línea .

Por lo tanto, su alineación vertical está especificada por la vertical-alignpropiedad:

Esta propiedad afecta el posicionamiento vertical dentro de un cuadro de línea de los cuadros generados por un elemento de nivel en línea.

Por defecto, su valor es baseline:

Alinee la línea de base del cuadro con la línea de base del cuadro principal. Si el cuadro no tiene una línea de base, alinee el borde del margen inferior con la línea de base del padre.

En este caso, todos tienen líneas de base, que se calculan de acuerdo con

La línea de base de un 'bloque en línea' es la línea de base de su último cuadro de línea en el flujo normal, a menos que no tenga cuadros de línea de flujo o si su propiedad de 'desbordamiento' tiene un valor calculado distinto de 'visible', en cuyo caso la línea de base es el borde del margen inferior.

La siguiente imagen aclara lo que está sucediendo (la línea roja es la línea de base):

ingrese la descripción de la imagen aquí

Por lo tanto, puedes

  • Cambiar la alineación vertical de los elementos, por ejemplo top, a , middleobottom

    .track-container > * {
  vertical-align: middle;
}

    Mostrar fragmento de código

  • Establezca el overflowde los elementos en algo diferente a visible, por ejemplo , hiddeno auto, de modo que su línea de base sea el borde del margen inferior.

    .track-container > * {
  overflow: hidden;
}

    Mostrar fragmento de código

  • Asegúrese de que los elementos no tengan un cuadro de línea de flujo, de modo que su línea de base sea el borde del margen inferior. Es decir, el contenido debe estar fuera de flujo :

    Un elemento se llama fuera de flujo si está flotando, posicionado absolutamente o es el elemento raíz. Un elemento se llama en flujo si no está fuera de flujo.

    Entonces, por ejemplo, puede colocar el contenido de los elementos en un contenedor y darle estilo con float: left:

    .track-container > * > .wrapper {
  float: left;
}

    Mostrar fragmento de código

Oriol
fuente
2
mucho más detallado y mejor explicado que la respuesta aceptada. Me pregunto por qué esto no se ha votado más a
1
@ user141554 Gracias :) Tenga en cuenta que esta respuesta es mucho más reciente que las demás, por lo que tener menos votos positivos es normal.
Oriol
8

Debe agregar vertical-align: top a esos dos elementos:

.album-artwork, .track-info {
    vertical-align:top;
}

ejemplo de jsFiddle

La alineación vertical predeterminada es la línea de base, pero está buscando la parte superior.

j08691
fuente
Para simplificar, haría .track-container div {vertical-align: top;}
Cam
1

O puede establecer float:left;en 3 elementos.

http://jsfiddle.net/fC2nt/

Szymon
fuente
Eso funcionaría, pero frustra el propósito de usar inline-blockelementos.
Josh Crozier
cierto, tienes razón. No voy a eliminar esta respuesta, podría ser una lección para alguien :)
Szymon
1
Tiene razón: 1+ .. además, es overflow:hiddenposible que deba agregarse al elemento principal para contener los elementos flotantes. Sin embargo, debe agregar una demostración que lo demuestre.
Josh Crozier
1

Asegúrese de que la relación de altura de línea en todos los elementos que está tratando de alinear sea la misma también. Si está utilizando una combinación de etiquetas DIV, P, H1-5, DT, DD, INPUT, BUTTON, esto también provocará irregularidades en la alineación vertical dependiendo de lo que ya haya definido en otro lugar.

Roralee
fuente