How to make image gallery centered - Photoshop

Begichh
May 10, 2019
203 views
2 votes
4 Answers

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">
      <a href="#">HOME</a>
      <a href="#">ABOUT</a>
      <a href="#">SERVICES</a>
      <a href="#">CONTACT</a>
      <a href="#">PORTFOLIO</a>
    </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>[email protected]</p>
      <p>+456 34 55 5567</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>

Tags: css html

Answers

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>

- AdamBuchananSmith
- May 10, 2019 at 6:45 pm
- 0 votes
0
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/
Login or Signup to reply.

- m1st
- May 10, 2019 at 6:54 pm
- 0 votes
0
use the html
```
<center>
    image code here
</center>

<right>
```
and
```
<left>
```
Login or Signup to reply.

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>

Please signup or login to give your own answer.

Click here to cancel reply.

How to make image gallery centered – Photoshop

Answers