2

tengo una tabla y dentro de un td tengo un div con dos dos elementos.

<td class="align-middle">
  <div style="flex;">
    
    <div class="ancho-columna">
      <input type="number" class="form-control">
    </div>
    <div class="alert alert-warning text-center m-auto alert-unidades" role="alert">
      Mensaje
    </div>          

  </div>
</td>

Cómo hago para alinear verticalmente el input y el mensaje? Es que me queda bastante bien, pero el mensaje me aparece ligeramente hacia abajo comparado con el input.

Saludos y muchas gracias.

1

1 respuesta 1

1

El td va a aplicar el estilo para lo que esté dentro, en este caso tu primer div. Por eso, tu div padre o contenedor de los otros 2 div es quien tendría que tener el estilo para alinear verticalmente el contenido. Probé esto rapidamente, espero que resuelva para tu escenario.

.center {
  text-align: center;
  border: 3px solid green;
}

.inner-container {
  border: 1px solid red;
  padding: 2px;
  margin: 2px;
}
<div class="center">

  <div class="inner-container">
    <input type="number" class="form-control">
  </div>

  <div class="inner-container">
    <p>This text is centered.</p>
    <img src="https://animalgiftclub-static.myshopblocks.com/images/2019/03/contain/256x256/5a89a3cdfc269fbc4198a5a79e9b009a.jpg" alt="alternatetext">
  </div>

</div>

Edición: se agrega bordes a los elementos div para mejor visualización

3
  • Gracias por la respuesta. Pero ahi lo estas centrando horizontalmente, no? el 8 ago. 2020 a las 9:30
  • @FranciscoMicucci no no, eso sería vertical fijate que si ejecutas el código aparece un div debajo del otro. Horizontalmente sería (de izquierda a derecha) uno al lado del otro.
    – andres
    el 8 ago. 2020 a las 13:29
  • @FranciscoMicucci ahí le agregué bordes para que puedas verlo mejor. Si lo que buscas es alinearlos horizontalmente deberías convertir el div en un elemento inline
    – andres
    el 8 ago. 2020 a las 13:38

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.