CODEWITHSUNDEEP
htmlcss
greenboxgoolu
greenboxgoolu

Reputation: 139

Center the HTML images

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>

Upvotes: 1

Views: 71

Answers (6)

Lokesh Suman
Lokesh Suman

Reputation: 503

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>

Upvotes: 0

Ramin eghbalian
Ramin eghbalian

Reputation: 2677

* {
  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

Upvotes: 0

PDSSandeep
PDSSandeep

Reputation: 189

Try with this: 

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

Upvotes: 0

Gopinath
Gopinath

Reputation: 4957

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:

  1. Specify 'align=center' for the top level section.
  2. 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>

Upvotes: 0

Nick Van Loocke
Nick Van Loocke

Reputation: 498

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.

Upvotes: 1

Nethra
Nethra

Reputation: 609

try this

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

Upvotes: 1

Related Questions