How to make image gallery centered - html

Question

I need help in centering my image gallery, i cant make it to work how i want, gutters are being pain in the ass and so are calculating margins and widths. I want images centered, so three images per row, with one image being all the way to the left, second image being centered and third image being all the way to the right, using margins and padding with floats individually I believe is a bad practice, there has to be a better way to do this. Each image is 295px width I changed their widths in photoshop. I don't wish to use css grid, flexbox etc… I just want to do it in basic way with floats and box model. If there is any good way to center these images with some space in between them.
/* CSS Document */
/*body {
margin: 20px 250px;
}*/
#wrapper {
width: 1000px;
margin: 20px auto;
}
header {
background-image: url("../Images/view2.jpg");
background-repeat: no-repeat;
text-align: center;
padding-top: 30px;
padding-bottom: 20px;
}
header #navbar {
margin-top: 35px;
}
#navbar a {
padding: 30px 35px;
}
header h1 {
margin: 0;
}
main {
background: rgba(211, 204, 38, 1.00);
overflow: hidden;
padding: 20px;
}
main #page {
text-align: center;
}
main #inner-content ul {
list-style: none;
}
main #inner-content {
overflow: hidden;
padding-left: 17.7px;
}
main #inner-content #block1 {
float: left;
padding: 0;
width: 33.33%;
}
main #inner-content #block2 {
float: left;
padding: 0;
width: 33.33%;
}
main #inner-content #block3 {
float: left;
padding: 0;
width: 33.33%;
}
main #inner-content #block1 li {
margin-left: 12.5px;
}
main #inner-content #block2 li {
margin-left: 12.5px;
}
main #inner-content #block3 li {
margin-left: 12.5px;
}
#about-text {
margin-bottom: 50px;
text-align: center;
}
footer {
background: rgba(96, 96, 96, 1.00);
padding: 20px;
overflow: hidden;
clear: left;
}
footer #contact {
float: left;
margin-left: 200px;
}
footer #form {
float: right;
margin-right: 200px;
}
<div id="wrapper">
<header id="header">
<h1>ISMAR PHOTOGRAPHY</h1>
<nav id="navbar">
HOME
ABOUT
SERVICES
CONTACT
PORTFOLIO
</nav>
</header>
<main>
<p id="about-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error aspernatur vitae illo animi aliquam perferendis dicta, temporibus, dolores suscipit accusantium cumque voluptas nesciunt pariatur numquam omnis quo sunt minus voluptatum vero odio
ipsam mollitia. Itaque consequatur non harum molestias quibusdam voluptatem provident, eius, aliquam magnam, nesciunt ipsum est maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed beatae veritatis provident expedita facere dolore
saepe autem cupiditate voluptas assumenda enim odit illum et placeat amet officiis, accusamus adipisci veniam, hic. Velit fugiat vitae, laboriosam omnis voluptates rem, totam esse quisquam sunt hic voluptatum amet quam repudiandae sequi incidunt
nam!</p>
<p id="page">01</p>
<div id="inner-content">
<ul id="block1">
<li><img src="Images/nature.jpg"></li>
<li><img src="Images/panorama.jpg"></li>
<li><img src="Images/self.jpg"></li>
</ul>
<ul id="block2">
<li><img src="Images/self2.jpg"></li>
<li><img src="Images/sky.jpg"></li>
<li><img src="Images/telex.jpg"></li>
</ul>
<ul id="block3">
<li><img src="Images/urban-beatz.jpg"></li>
<li><img src="Images/urban-beatz2.jpg"></li>
<li><img src="Images/view.jpg"></li>
</ul>
</div>
</main>
<footer>
<div id="contact">
<h2>CONTACT ME</h2>
<p>randomemail#gmail.com</p>
<p>[phone]</p>
</div>
<form action="#" name="form" id="form">
<label for="name">Name</label><br>
<input type="text" id="name"><br>
<label for="last-name">Last name</label><br>
<input type="text" id="last-name"><br>
<label for="email">Email</label><br>
<input type="text" id="email"><br>
<label for="message">Message</label><br>
<input type="text" id="message"><br>
</form>
</footer>
</div>

Answer 1

Okay, if you don't want to use grid or flexbox, then I'd suggest the old school table is a good option.
.my-table {
width: 100%;
}
.my-table td {
/* Change this padding to add gutters of desirable size*/
padding: 20px;
}
.my-table img {
width: 100%;
height: auto;
}
<table class="my-table">
<tr>
<td><img src="image_1_location.jpg" /></td>
<td><img src="image_2_location.jpg" /></td>
<td><img src="image_3_location.jpg" /></td>
</tr>
<tr>
<td><img src="image_4_location.jpg" /></td>
<td><img src="image_5_location.jpg" /></td>
<td><img src="image_6_location.jpg" /></td>
</tr>
</table>
Option 2
There is another way you can achieve this with floats if you want.
The only thing is that you'll have to make multiple containers to accommodate for the floats.
Here's how you can do it
.my-image-gallery {
position: relative;
}
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.floating-element {
float: left;
width: 33.33%;
}
.image-container {
padding: 10px;
}
.image-container>img {
width: 100%;
height: auto;
}
<div class="my-image-gallery">
<div id="row-1" class="clearfix">
<!-- You'll need to make a container for each image -->
<div class="floating-element">
<div class="image-container">
<img src="google-logo.png" />
</div>
</div>
<div class="floating-element">
<div class="image-container">
<img src="google-logo.png" />
</div>
</div>
<div class="floating-element">
<div class="image-container">
<img src="google-logo.png" />
</div>
</div>
</div>
</div>

Answer 2

While I think this is a riduculous way of doing this. You can use calc() to add a margin on both sides of the center img this example is using your current markup with no flex:
li:nth-child(2) {
margin: 0 calc(50% - 408px);
}
li {
width: 259px;
height: 259px;
list-style-type: none;
background-color: lightblue;
display: inline-block;
}
https://jsfiddle.net/DIRTY_SMITH/0f78ksvx/12/
The better way that you don't want to do would be to use flex:
#block1{
display: flex;
justify-content: space-between;
}
https://jsfiddle.net/DIRTY_SMITH/0f78ksvx/3/

Answer 3

Below are some minimal examples of how to implement your gallery. The concept is the same for both the Flexbox and Float approaches. Tell each image that it should be 1/3 the width of the container element (including margin) and allow the images to wrap inside their container element.
The overflow and negative margin properties used in both "remove" the outermost margins and may not be something that you desire or are concerned with.
Using Flexbox
body {
margin: 2rem;
}
.container {
margin-left: auto;
margin-right: auto;
width: 75%;
overflow: hidden;
}
.gallery {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: -1rem;
background-color: rgba( 111, 222, 50, 0.15);
}
.gallery img {
display: flex;
margin: 1rem;
width: calc( 33.33333% - 2rem );
}
<div class="container">
<div class="gallery">
<img src="https://via.placeholder.com/300x300/fc0">
<img src="https://via.placeholder.com/300x300/">
<img src="https://via.placeholder.com/300x300/d10">
<img src="https://via.placeholder.com/300x300/">
<img src="https://via.placeholder.com/300x300/d10">
<img src="https://via.placeholder.com/300x300/fc0">
<img src="https://via.placeholder.com/300x300/d10">
<img src="https://via.placeholder.com/300x300/fc0">
<img src="https://via.placeholder.com/300x300/">
</div>
</div>
Using Floats
I highly recommend moving away from floats and using Flexbox or CSS Grid unless there is a specific behavior that floats provide that favors some requirement.
body {
margin: 2rem;
}
.container {
margin-left: auto;
margin-right: auto;
width: 75%;
overflow: hidden;
}
.gallery {
margin: -1rem;
overflow: hidden;
background-color: rgba( 111, 222, 50, 0.15 ); /* For illustrative purposes. */
}
.gallery img {
float: left;
margin: 1rem;
max-width: calc( 33.33333% - 2rem); /* Subtract left and right margins */
}
<div class="container">
<div class="gallery">
<img src="https://via.placeholder.com/300x300/fc0">
<img src="https://via.placeholder.com/300x300/">
<img src="https://via.placeholder.com/300x300/d10">
<img src="https://via.placeholder.com/300x300/">
<img src="https://via.placeholder.com/300x300/d10">
<img src="https://via.placeholder.com/300x300/fc0">
<img src="https://via.placeholder.com/300x300/d10">
<img src="https://via.placeholder.com/300x300/fc0">
<img src="https://via.placeholder.com/300x300/">
</div>
</div>
body {
margin: 2rem;
}
.container {
margin-left: auto;
margin-right: auto;
width: 75%;
overflow: hidden;
}
.gallery {
overflow: hidden; /* For illustrative purposes. */
background-color: rgba( 111, 222, 50, 0.15 ); /* For illustrative purposes. */
}
.gallery img {
float: left;
margin: 1rem;
max-width: calc( 33.33333% - 2rem); /* Subtract left and right margins */
}
<div class="container">
<div class="gallery">
<img src="https://via.placeholder.com/300x300/fc0">
<img src="https://via.placeholder.com/300x300/">
<img src="https://via.placeholder.com/300x300/d10">
<img src="https://via.placeholder.com/300x300/">
<img src="https://via.placeholder.com/300x300/d10">
<img src="https://via.placeholder.com/300x300/fc0">
<img src="https://via.placeholder.com/300x300/d10">
<img src="https://via.placeholder.com/300x300/fc0">
<img src="https://via.placeholder.com/300x300/">
</div>
</div>

Answer 4

use the html
<center>
image code here
</center>
<right>
and
<left>