Skip to main content
kacpero12956336
Participant
Oct 23, 2019 10:51 PM UTC
Question

Problem with centering photos in columns

Hello, I have a problem when I'm publishing my website. I created another row with 2 columns underneath another row with 3 columns. When I'm clicking on preview in Dreamweaver it shows that images are centered in the second column but when I publish my site to the web images are moved to the left side.

 

HTML:

 

<div class="row1">
 <div class="column1">
 <img src="../fb_icon.png" class="social" width="100"   alt="facebook"></a>
 </div>
 <div class="column1">
 <img src="../insta_icon.png" class="social" width="100" alt="instagram"></a>
 </div>
 </div>
 
CSS
 
.column1 {
  float: left;
  width: 50%;
 
}
.row1::after {
  content: "";
  clear: both;
  display: table;
}
 
I'm just starting my journey with HTML so please be respectful. 😄

 

 

 

This topic is closed to new replies. Start a new post to keep the conversation going.

2 replies

BenPleysier
Community Expert
Community Expert
Oct 24, 2019 5:15 AM UTC

Try

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <style>
      .images {
        display: flex;
        justify-content: center;
      }
    </style>
  </head>

  <body>
    <div class="images">
      <a href="https://www.facebook.com/22C11-103008301130983/">
      <img src="../fb_icon.png" class="social" width="100"   alt="facebook"></a>
      <a href="https://www.instagram.com/22c11_co/">
      <img src="../insta_icon.png" class="social" width="100" alt="instagram"></a>
    </div>
  </body>
</html>
Translate
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
Nancy OShea
Community Expert
Community Expert
Oct 23, 2019 11:14 PM UTC

What is the URL to your online page? 

 

 

Translate
Nancy O'Shea— Product User & Community Expert