How do I align my images (more than one) to be Centered without using Align?

I would really love to know how to make all my images, text, and the group to be centered to the site at all times without using <center>, cause I can more than 1 group. <!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .column { float: left; width: 25.0%; padding: 1px; } /* Clearfix (clear floats) */ .row:: { content: ""; clear: both; display: table; } </style> </head> <body> <center><h2>Images Side by Side</h2></center> <center><p>How to create side-by-side images with the CSS float property:</p></center> <div class="row"> <div class="column"> <img src="img_snow.jpg" alt="Snow" style="width:80%"> </div> <div class="column"> <img src="img_forest.jpg" alt="Forest" style="width:80%"> </div> <div class="column"> <img src="img_mountains.jpg" alt="Mountains" style="width:80%"> </div> </div> </body> </html>

html css

13th Feb 2020, 1:23 AM

Michael

2 Answers

+ 4

//You can use this flex rules .row{ display:flex; justify-content:center; }

13th Feb 2020, 3:11 AM

Sudarshan Rai

to align items use the following script either on the body tag, or create a container class(recommended): display: flex; flex-direction: column; align-items:center;

13th Feb 2020, 3:04 AM

Logomonic Learning