Im using Bootstrap 4 to create a responsive layout with 3 columns that adjust order, width, and horizontal alignment based on screen size. Everything is functioning correctly except for the horizontal center alignment of the images on screens smaller than 768px. Below is the code I am currently using:
.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 current code example, the images in the two columns are both aligned left instead of centered vertically within their respective columns as expected. For screens larger than 768px, the columns automatically float to the left and right (col-md-auto), which is the desired behavior and should remain unchanged.
How can I achieve image centering in their column for screens smaller than 768px?
I have explored similar questions like Vertical Align Center in Bootstrap 4 and attempted various suggested solutions such as setting "mx-auto," using "justify-content-center" with "d-flex," establishing a fixed width, etc. Unfortunately, none of these approaches seem to be effective in resolving the issue. What could I be overlooking?