La propiedad justify-content
solo funciona con elementos flex
para elegir cómo se distribuirán sus elementos hijos a lo largo de cada fila y, en tu caso, no lo es.
Puedes centrar verticalmente un elemento dentro de otro haciendo al padre flex
y configurando los márgenes superior e inferior como automáticos:
.w3-bar {
display: flex;
}
.w3-button {
margin-top: auto;
margin-bottom: auto;
}
Para que esta solución funcione en tu diseño debes permitir que deje de "flotar" el botón X a la derecha (float: right
) para que, en su lugar, colocar simplemente el elemento a la derecha (después del elemento principal).
Tal y como está compuesta tu página debes configurar con justify-content: flex-end
que la justificación de los elementos sea con todos ellos justificados (pegados) a la derecha. Para que el elemento principal se desplace a la izquierda deberás agregar un margen automático a su derecha para que éste "se empuje" a la izquierda, ocupando todo el espacio dejado por el botón.
A continuación puedes estas propuestas funcionando:
.w3-bar {
display: flex;
justify-content: flex-end;
}
.w3-button {
margin-top: auto;
margin-bottom: auto;
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="w3-container">
<h2>Avatar List</h2>
<ul class="w3-ul w3-card-4">
<li class="w3-bar">
<span style="margin-right: auto;">
<img src="https://www.w3schools.com/w3css/img_avatar2.png" class="w3-bar-item w3-circle w3-hide-small" style="width: 85px;">
<div class="w3-bar-item">
<span class="w3-large">Mike</span><br>
<span>Web Designer</span><br>
<span>(Línea adicional)</span>
</div>
</span>
<span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-right">×</span>
</li>
</ul>
</div>
La manera ideal de diseñar la composición de estos elementos sería hacerlo de la siguiente manera:
.contenedor {
border: 1px red solid;
display: flex;
justify-content: space-between;
}
.contenedor div {
border: 1px green solid;
margin-top: auto;
margin-bottom: auto;
}
<div class="contenedor">
<div>Línea 1<br/>Línea 2<br/>Línea 3</div>
<div><button>×</button></div>
</div>
Usando justify-content: space-between
se enviarían el primer y último elemento a cada una de las esquinas (no necesitarías el margen automático a la derecha del primer elemento).
justify-content: center;
? overtical-align: center;
que es la manera correcta, middle no existejustify-content: center
justifica horizontalmente (y no verticalmente) elementosflex
yvertical-align
solo justifica verticalmente elementos en línea (como<img>
) o el contenido de las celdas de las tablas.