Align images with description

Question

I need to align two images so that they are centered, with a description below.

I tried something like:

<style>
        .thumb {
        width: 140px;
        height: 140px;
        position: relative;
        float: left;
        }
        .thumb img{
        position: relative;
        margin: auto;
        margin-left: 560px;

        }
        .desc{
        margin-left: 582px;
        }
</style>

        <div class="thumb">
        <a href="pdf_clientes.php" target="_blank">
        <img src="imagens/printer.png">
        </a>
        <div class="desc"><span style="color:white">Imprimir Relatório</span></div>
        </div>


        <div class="thumb">
        <a href="pdf_clientes.php" target="_blank">
        <img src="imagens/search.png">
        </a>
        <div class="desc"><span style="color:white">Filtrar Resultados</span></div>
        </div>

The result is working as expected, but I believe that is not the right way to do it, because I believe that in monitors of other resolutions the result will be different. How can I make it smarter?

Answer 1

Young your CSS needs several changes, you should not align the objects using margin:580px for example. To do this create a "container" who will be the "father" of these objects and place whatever is inside the container aligned to the center, so it will always be aligned regardless of the screen size of the user.

See how the code below, it is very simple and solves your problem with few lines of CSS, not even touched HTML, just created the <div class="container"> to place the Thumbs centralized within.

body {
    background-color: green;
}
.container {
    margin: 0 auto;
    width: 90%;
    text-align: center;
}
.thumb {
    width: 140px;
    height: 140px;
    display: inline-block;
}

<div class="container">
    <div class="thumb">
    <a href="pdf_clientes.php" target="_blank">
    <img src="http://placeskull.com/50/50">
    </a>
    <div class="desc"><span style="color:white">Imprimir Relatório  Relatório</span></div>
    </div>


    <div class="thumb">
    <a href="pdf_clientes.php" target="_blank">
    <img src="http://placecage.com/50/50">
    </a>
    <div class="desc"><span style="color:white">Filtrar Resultados  Relatório</span></div>
    </div>
</div>

Answer 2

Really, using margin-left is not the best option because it will get bent in different screen sizes than yours. My suggestion is the use of Flexbox:

<style>
    .thumbnails {
        display: flex;
        flex-flow: row wrap;
        /*defina aqui o width que comporte os dois itens*/
        /*defina margin: 0 auto; para centralizar no meio*/ 
    }
    .thumb {
        width: 140px;
        height: 140px;
        margin: 0 auto; //isso vai fazer o espaçamento entre eles ser igual e de acordo com a largura do elemento pai (thumbnails).
    }
    .thumb img{
        position: relative;
        margin: auto;
    }
    .desc{
        text-align: center;
    }
</style>

And your HTML will look something like:

<div class="thumbnails">    
   <div class="thumb">
        <a href="pdf_clientes.php" target="_blank">
            <img src="imagens/printer.png">
        </a>
        <div class="desc">
            <span style="color:white">Imprimir Relatório</span>
        </div>
   </div>
   <div class="thumb">
        <a href="pdf_clientes.php" target="_blank">
            <img src="imagens/search.png">
        </a>
        <div class="desc">
            <span style="color:white">Filtrar Resultados</span>
        </div>
   </div>
</div>