Centralize elements using margin

Question

I don’t know much about CSS or HTML, but I was building my site and I came across the following problem:

In the image above to see that all thumbnails are arranged and perfectly aligned.

When I resize the window there’s a space on the side. I wanted to know how to fill this space with changing only the 'margin' of thumbnails to make them more spaced until filling everything.

HTML:

<div class="anime-item">
    <a href="/anime/1/">
        <img class="img-anime-thumb" src="" />
        <div class="anime-caption">Nome</div>
    </a>
</div>

CSS:

.anime-item {
    float:left;
    margin:15px;
    box-shadow:2px 2px 5px rgba(31,31,31,.8);
}

Answer 1

Paulo, I have 2 solutions for you:

1st Center the items:

First we will use li for each item in the example, it is more semantic and also makes it easier because we will have to add the attr text-align center to ul.

Ex:

ul {
  display: block;
  text-align: center;
}
li {
  background-color: rgb(201, 225, 222);
  display: inline-block;
  height: 180px;
  width: 120px;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

Explanation: this makes the elements only align to the middle.

2º Centering and generating space between items:

For this example I will increment the example above.. You have used li to delimit the number of items per line and centralize Thumb within that container.

Ex.:

/*resets*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


ul {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
}
li {
  background-color: white;
  display: inline-block;
  min-width: 24.5%;
}
img {
  background-color: rgb(201, 225, 222);
  height: 180px;
  margin: 10px auto;
  width: 120px;
}

<ul>
  <li>
    <img src="#" alt="item 1">
  </li>
  <li>
    <img src="#" alt="item 2">
  </li>
  <li>
    <img src="#" alt="item 3">
  </li>
  <li>
    <img src="#" alt="item 4">
  </li>
</ul>

Explanation:

• I determined that it would be 4 items per column because each li has 24.5 min-width%.

Note: if you delimit the li with 25% you will see that one of the elements must break below, this is due to the rendering of the browser, because it considers in addition to the 25% of the elements some other elements such as the scroll bar that add up to more than 100% and this generates the break, that is, I advise you to use a little below this value, as for example 24.5%.

• Aligns Thumb inside the li with margin 0 auto;

• For other breaks in the responsive you can use media query, for example for 2 items per column you use 50% min-width (use 49%). Examples of Media query.

There are also other solutions like flexbox, display table... But I advise you to use these, because they are the easiest and compatible with the browsers used today. I hope to have helped, any doubts can comment.. Thanks!

Answer 2

The best thing for this case, to display a catalog (a list of any items) is to use the default HTML lists.

It’s semantically accurate, makes it easy for visually impaired web page reading tools, makes it easy to navigate the page using only the keyboard, and helps google index the content of your page to improve the result of your pages on search engines in general (principles of SEO).

Here’s an example of how you can do this.

* {
  box-sizing: border-box
}
.anime-item {
  width: 140px;
  height: 280px;
  background-color: red;
  box-shadow: 2px 2px 5px rgba(31, 31, 31, .8);
}
ul.catalogo {
  list-style: none;
  padding: 0px;
  text-align: center;
}
ul.catalogo > li {
  display: inline-block;
  margin: 10px 15px;
}

<ul class='catalogo'>
  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>

  <li class='anime-item'>
    <a href="/anime/1/">
      <img class="img-anime-thumb" src="" />
      <div class="anime-caption">Nome</div>
    </a>
  </li>
</ul>

I hope I’ve helped.

Answer 3

<div class="anime-item">, in that element puts:

position: relative;
margin: auto;