3

Estoy intentando alinear los elementos de un div en mi pagina web para que estén a la misma altura, pero que los botones se encuentren pegados a la derecha.

Mi html:

<body>
    <div class="topMenu">
        <p>WEBISTE</p>
        <button>LOGOUT   <i class="fa fa-sign-out"></i></button>
        <button>REFRESH   <i class="fa fa-refresh"></i></button>
      </div>
</body>

Mi css:

    body {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.topMenu {
    width: 90%;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    list-style-type: none;
    background-color: rgb(124, 124, 124);
    overflow: hidden;
    display: flex;
    border-radius: 30px;
}

.topMenu p {
    font-size: 50px;
    color: darkblue;
    font-weight: bold;
}

.topMenu button {
    border-radius: 8px;
    border-color: black;
    background-color: rgb(195, 216, 255);
    text-decoration: black;
    font-size: 17px;
    height: 40px;
}

El problema que tengo es que los elementos del div no se posicionan en la misma linea imaginaria y el resultado se ve así: introducir la descripción de la imagen aquí

También querría saber porque el cuadro que se crea del div es tan grande y como puede adaptarse al tamaño de los elementos.

1 respuesta 1

1

Como el contenedor de los elementos que quieres alinear es display: flex lo único que tendrías que hacer es que se centren respecto a su eje secundario (en tu caso el eje y, verticalmente) a través de align-items: center.

Para que tu menú ocupe tanto como lo que sus hijos en vez de ocupar el máximo que le permita su padre, pueces usar display: inline-flex en vez de display: flex.

body {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.topMenu {
  width: 90%;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  list-style-type: none;
  background-color: rgb(124, 124, 124);
  overflow: hidden;
  display: inline-flex; /* Para hacer que el elemento tan solo ocupe lo que sus hijos marque */
  border-radius: 30px;
  align-items: center; /* Para alinear items flexibles respecto al eje secundario */
  justify-content: space-between;
}

.topMenu p {
  font-size: 50px;
  color: darkblue;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 0;
}

.topMenu button {
  border-radius: 8px;
  border-color: black;
  background-color: rgb(195, 216, 255);
  text-decoration: black;
  font-size: 17px;
  height: 40px;
}
<body>
  <div class="topMenu">
    <div class="contenedor-logo">
      <p>WEBISTE</p>
    </div>
    <div class="contenedor-botones">
      <button>LOGOUT   <i class="fa fa-sign-out"></i></button>
      <button>REFRESH   <i class="fa fa-refresh"></i></button>
    </div>
  </div>
</body>

EDIT

Para que los botones estén posicionados a la derecha de su contenedor y el "logo" a la izquierda, encerré el logo en un <div> contenedor y los botones en otro, para que por medio de justify-content: space-between el espacio que no ocupen los elementos sea puesto entre medias de estos.

Para que la altura de tu contenedor se ajuste a la de sus hijos debes suprimir los márgenes superior e inferior que el navegador está dando por defecto a tu <p>, dándoles valor 0.

6
  • Siguen sin estar a la derecha en este caso y el div, aun con display: inline-flex sigue siendo mayor respecto a los elementos que contiene
    – winset
    Commented el 10 jul. 2021 a las 10:29
  • Si pudieras subir un ejemplo del resultado que pretendes conseguir, estaría bien. Si le quitas el width a .topMenu, junto con display: inline-flex se consigue que la caja de fondo gris ocupe lo que sus hijos marcan. Pero lo de que estén pegados a la derecha no sé a qué te refieres, los botones ya quedarían pegados a la derecha
    – phpMyGuel
    Commented el 10 jul. 2021 a las 11:04
  • Si se quita el width, lo único que se consigue es que el contenido esté pegado, la altura sigue igual. Es fácil de entender, los botones en la esquina superior derecha y en la misma línea del texto.
    – winset
    Commented el 10 jul. 2021 a las 11:58
  • Es fácil de entender si lo explicas bien. En tu pregunta en ningún momento mencionas que lo que te gustaría que se adaptase a los elementos es la altura, no la anchura. Ahora queda más claro lo que pretendes.
    – phpMyGuel
    Commented el 10 jul. 2021 a las 12:09
  • Claro, me refería a la altura ya que me gustaría que los botones estén pegados a la derecha uno junto al otro. No se como aportar un ejemplo de lo que indico ya que no llego a elaborarlo en mi código.
    – winset
    Commented el 10 jul. 2021 a las 12:12

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.