1

estoy intentando centrar una UL dentro de un div, preciso que quede equidistante con los bordes superior e inferior. Entiendo que con el line height se puede llegar a lograr pero por ahí algo más me está faltando agregar al css,

<h3>Contact Information </h3>
<div class="contact">
    <ul>
        <li>Email: [email protected]</li>
        <li>Web: http://example.com</li>
        <li>Tel: 123 45678</li>
    </ul>
</div>
</div>
*{ box-sizing: border-box; margin: 8px; padding: 0px; }

body{ margin: auto; width: 500px; height: 500px; }


h2{ border-bottom: dotted blue 3px; color: lightblue; }


h4{ color: grey; margin: 15px;}

h3{ height: 10%; }

.contact{ border: solid blue 5px; background-color: lightcoral; height: 8em; }

ul{ margin-left: 25px; line-height: 1.5em; }

p{ height: 20%; }

.container{ height: 100%; border: solid black 3px; }

Preview del código

1 respuesta 1

1

Lo que hice fue encerrar en un div a los li que están dentro del ul para que al momento de centrar solo sea afectado a ese div con los li y no solo a los li:

  <ul>
    <div>
      <li>Email: [email protected]</li>
      <li>Web: http://example.com</li>
      <li>Tel: 123 45678</li>
    </div>
  </ul>

Ya que si lo hacemos sin que el div encierre a los li, estaremos centrando solo a esos li, dando este resultado:

introducir la descripción de la imagen aquí


Entonces, para centrar al contenido del ul (o sea, centrar ese div), al ul lo convertí en un contenedor flexible y alineé el contenido al centro, tal cual como muestro en las siguientes propiedades:

ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}

Código completo:

* {
  box-sizing: border-box;
  margin: 8px;
  padding: 0px;
}

body {
  margin: auto;
  width: 500px;
  height: 500px;
}

h2 {
  border-bottom: dotted blue 3px;
  color: lightblue;
}

h4 {
  color: grey;
  margin: 15px;
}

h3 {
  height: 10%;
}

.contact {
  border: solid blue 5px;
  background-color: lightcoral;
  height: 8em;
}

ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}

p {
  height: 20%;
}

.container {
  height: 100%;
  border: solid black 3px;
}
<h3>Contact Information </h3>
<div class="contact">
  <ul>
    <div>
      <li>Email: [email protected]</li>
      <li>Web: http://example.com</li>
      <li>Tel: 123 45678</li>
    </div>
  </ul>
</div>
</div>

5
  • Gracias por la respuesta, lo que quiero es que quede centrado vertical, el horizontal está correcto, quiero que queden distribuidos los li con ese mismo line height de igual manera con respecto a los bordes inferior y superior, comentame si no se entiende. Quedaría algo como esto developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/…
    – Agus
    Commented el 24 ene. 2023 a las 20:44
  • y cual es la diferencia de esa imagen con los resultados de tu código?... ya que mencionas -> estoy intentando centrar una UL dentro de un div... Commented el 24 ene. 2023 a las 21:04
  • Lo solucioné agregando un margin top de 15px al UL. Checkalo si quieres, así entiendes que quería lograr. Quería que la distancia del primer elemento de la lista en relación con el margen superior sea igual a la de la del último elemento con el margen inferior del contenedor.
    – Agus
    Commented el 24 ene. 2023 a las 21:18
  • Vale, lo solucionaste, y en qué se basa tu pregunta entonces?... Commented el 24 ene. 2023 a las 21:22
  • 1
    En la duda que planteé, en cómo centrar a lo alto un UL dentro de un div. Todavía estoy intentando comprender el modelo de cajas así que mis disculpas si fue un poco sonsa la pregunta. Marco como correcta tu respuesta para evitar que se extienda el hilo.
    – Agus
    Commented el 24 ene. 2023 a las 21:28

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.