1

Estaba siguiendo un ejemplo de W3Schools sobre listas y me gustaría saber como hacer para centrar el <span> que contiene la letra x.

Si se observa en la imagen, éste no está centrado verticalmente.

HTML:

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>Avatar List</h2>
  <p>You can combine w3-ul and the w3-bar classes to create an avatar list:</p>
  <ul class="w3-ul w3-card-4">
    <li class="w3-bar">
      <span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-right">×</span>
      <img src="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>
      </div>
    </li>
  </ul>
</div>
</body>
</html>

Captura de pantalla del resultado

Ya intenté añadir:

style="vertical-align: middle;"

Pero no ha funcionado.

2
  • 1
    has probado con justify-content: center;? o vertical-align: center; que es la manera correcta, middle no existe Commented el 10 nov. 2021 a las 14:01
  • 1
    @NicolasOñate , justify-content: center justifica horizontalmente (y no verticalmente) elementos flex y vertical-align solo justifica verticalmente elementos en línea (como <img>) o el contenido de las celdas de las tablas. Commented el 10 nov. 2021 a las 14:30

2 respuestas 2

1

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).

1
  • 1
    Muchísimas gracias por tu ayuda, ha servido de primera Commented el 10 nov. 2021 a las 17:02
0

En la propiedad class de la etiqueta span sustituye 'w3-right' por 'w3-display-right'.

Ojo, no se si lo sabes pero este ejemplo de la W3 esta basado en un framework de ellos tipo Boostrap, no es css puro asi que esta solución solo te servirá si usas ese framework.

Puedes encontrar más información sobre la colocación de elementos en el framework de w3 aquí: https://www.w3schools.com/w3css/w3css_display.asp

<span onclick="this.parentElement.style.display='none'" class="w3-bar-item w3-button w3-white w3-xlarge w3-display-right">×</span>

1
  • 1
    hmm, no, eso no ha solucionado mi problema. De hecho, lo que hizo fue posicionarse en el medio de la pantalla Commented el 10 nov. 2021 a las 14:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.