0

Using Bootstrap 4, I have a responsive layout with 3 columns, that (should) change order, width, and horizontal alignment on different screen sizes. It all works fine except that the horizontal center alignment of the imgs on screensize <768px does not work. Here's my code:

.icon-xl-large {
  width: 80px;
}

.w-400px {
  max-width: 400px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row justify-content-center justify-content-md-between">
  <div class="order-md-1 col-6 col-md-auto align-self-center">
    <img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto" >
  </div>
  <div class="order-md-3 col-6 col-md-auto align-self-center">
    <img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto" >
  </div>
  <div class="col-12 order-md-2 col-md-6 w-400px text-center">
    <h5>Sample text in center</h5>
  </div>
</div>

In my example code the imgs in the 2 columns both align left. The expected behavior should be that both imgs align vertically center in their respective column. On screensize >768px the columns of the imgs automatically float to the left and right (col-md-auto). This is expected and should not be changed.

How can I center the imgs in their column on screensize <768px?

I found similar questions such as Vertical Align Center in Bootstrap 4 and tried various suggested solutions, e.g. setting mx-auto, justify-content-center with d-flex, setting a fixed width, etc. Nothing seems to work for me. What am I missing?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
tealowpillow
  • 419
  • 2
  • 10
  • 24

2 Answers2

1

you can give the divs containing the images : text-align: center. For instance:

@media (max-width: 768px) {
    .col-6.col-md-auto.align-self-center {
        text-align:center;
    }
}
Marouen Mhiri
  • 1,640
  • 1
  • 14
  • 20
1

For .mx-auto to work, you need .d-block. Aligning images. 

<img src="http://via.placeholder.com/350x350" alt="" class="icon-xl-large mx-auto d-block">
azeós
  • 4,853
  • 4
  • 21
  • 40