Center the HTML images - html

Question

I want the two images being centered. See https://prnt.sc/qxaapc for a visual representation of what I want.
Code:
* {
box-sizing: border-box;
}
.column {
float: left;
width: 28%;
height: 28%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row" align="center">
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
</div>
</div>

Answer 1

try this
.row
{
display: flex;
justify-content: center;
}

Answer 2

Instead of using floats you could better use flexbox. See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for all the different options you have with this.
Working example:
/* General */
* {
box-sizing: border-box;
}
img {
width: 100%;
height: auto;
}
/* Specific */
.row {
display: flex;
justify-content: center;
}
.column {
flex: 0 1 28%;
padding: 5px;
}
<div class="row">
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow">
</div>
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
</div>
</div>
Small tip: try to avoid inline styling like style="width: 100%" on the images.

Answer 3

class="column" for the inner sections is causing the images to appear side-by-side.
These 2 changes can make the images appear one below the other, in a center justified manner:
Specify 'align=center' for the top level section.
Specify 'class=row' for the sections that show the images.
Here is the working solution:
<div align="center">
<div class="row">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" alt="Snow" style="width:300px">
</div>
<div class="row">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" style="width:300px">
</div>
</div>

Answer 4

Try with this:
.column {
width: 28%;
height: 28%;
padding: 5px;
display: inline-block;
margin-right: 15px;
text-align: left;
}

Answer 5

* {
box-sizing: border-box;
}
.column {
float: left;
width: 28%;
height: 28%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row {
display: flex;
justify-content: center
}
<div class="row" align="center">
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
</div>
</div>
I just set for .row display: flex; justify-content:center; style

Answer 6

Use display: inline-block; instead of float:left in your .column class
and use width:100% for .row class
* {
box-sizing: border-box;
}
.row{
width: 100%;
}
.column {
display: inline-block;
width: 28%;
height: 28%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row" align="center">
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" style="width:100%">
</div>
</div>