0

Hola amigos tengo un pequeño problema, estoy haciendo uso de las unas clases boostrap, pero ¿Como hago para que la imagen se centre al momento de ejecutarlo en una pantalla móvil?.

<div class=" d-flex justify-content-center">
  <div class="row">
          <div class="col ml-md-auto">
            <img src="./cocacola.PNG" alt="Natclar" >              
          </div>
          <div class="col-lg-3" style="margin-top:30px">
            <h1>hhhshsh</h1>
          </div>
          <div>

          </div>
  </div>
</div>

Aquí la imagen

introducir la descripción de la imagen aquí

4

3 respuestas 3

0

¿Como quieres centrarlo?

Porque una solución muy sencilla es usar text-center en el row y listo, tendrás centrada la imagen. Pero no sé si esa sea exactamente la forma en que buscas que se vea

Nota que al poner col sin especificar el numero de columnas, puede ser confuso, le he puesto 12, pero puedes cambiarlo.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row text-center">
  <div class="col-md-12">
    <img class="img-fluid" src="https://humantalent.hiringroom.com/data/accounts/humantalent/logos/5bbca0ec9aab463555f1d396.jpg" alt="Natclar" >
  </div>
  <div class="col-lg-3 mt-4">
    <h1>hhhshsh</h1>
  </div>
</div>

2
  • el col12 no era para tomar todo el ancho del espacio ?
    – Juan Ortiz
    Commented el 23 ene. 2019 a las 16:17
  • sí, yo lo puse solo de ejemplo, podría ser col-lg-9 para que quedaran juntos en pantallas grandes. lo importante aqui es el text-center. Y la estructura correcta d elos divs, que está muy rara como la puso originalmente.
    – memoadian
    Commented el 23 ene. 2019 a las 16:18
0

intenta alinearlos con css asi

@media screen and (min-width: 400px) and (max-width: 700px) { 

 img{
    margin:0 auto;
   }

} 
0

Entiendo que solo debe ir centrado en la versión móvil, de ahí que para escritorio tenga un col-lg-3. Por ese motivo debes definir para cada breakpoint/media-query un número de columnas concreto:

 <div class=" d-flex justify-content-center">
   <div class="row">
           <div class="col-12 col-md-auto ml-auto">
             <img src="./cocacola.PNG" alt="Natclar" >              
           </div>
           <div class="col-12 col-md col-lg-3" style="margin-top:30px">
             <h1>hhhshsh</h1>
           </div>
           <div>

      </div>

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.