Problema con ajuste responsive de CSS - Bootstrap

Question

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

Hola, no entiendo cómo usas tu código de esa manera, tienes un elemento `row` y dentro de ese elemento tienes un elemento `col` con la clase `margin left - medium device - auto` y otro elemento `col` en la misma fila con la clase `large device -3 columns` y pretendes que la imágen esté centrada. Te sugiero que leas [Bootstrap - Grid System](https://getbootstrap.com/docs/4.2/layout/grid/) para que te familiarices un poco con Bootstrap. Saludos — Mauricio Contreras, Jan 23 '19 at 16:05
Lo que estas buscando se llaman media queries ó responsive-breakpoints: https://getbootstrap.com/docs/4.2/layout/overview/#responsive-breakpoints Lo que necesitas es establecer uan para el tamaño máximo que quieres para la vista móvil y en ese bloque añadir una regla para la imagen que le haga un display:none — xero399, Jan 23 '19 at 16:05
Posibles duplicados: https://es.stackoverflow.com/questions/73268/centrar-una-img-responsive-bootstrap y https://es.stackoverflow.com/questions/69174/centrar-un-div-con-bootstrap/ — Jheyman Mejia, Jan 23 '19 at 16:12
¿Responde esto a tu pregunta? [Centrar una img-responsive bootstrap](https://es.stackoverflow.com/questions/73268/centrar-una-img-responsive-bootstrap) — Jheyman Mejia, Dec 13 '19 at 13:35

score 0 · Answer 1 · answered Jan 23 '19 at 16:07

¿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>

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, Jan 23 '19 at 16:18

score 0 · Answer 2 · answered Jan 23 '19 at 16:21

0

intenta alinearlos con css asi

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

 img{
    margin:0 auto;
   }

}

answered Jan 23 '19 at 16:21

Juan Ortiz

754
1
6
20

score 0 · Answer 3 · answered Dec 12 '19 at 21:25

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>

Problema con ajuste responsive de CSS - Bootstrap

3 Answers3