Align images with description

Question

Align images with description

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

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 correct way to do it, because I believe that in monitors of other resolutions the result will be different. How can I do it smarter?

html css bootstrap

asked by anonymous 02.02.2018 / 12:12

2 answers

1

Actually, using margin-left is not the best option because it will get bent on different screen sizes than yours. My suggestion is to use 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>

02.02.2018 / 12:28

How do I create a mouse-over effect on an image and position it where I want it? Add spaces to the end of the field - python

score 1 · Accepted Answer

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

See how the code below, it is very simple and solves your problem with a few lines of CSS, nor moved in HTML, only created <div class="container"> to put the Thumbs in centralized.

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><divclass="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><divclass="desc"><span style="color:white">Filtrar Resultados  Relatório</span></div>
    </div>
</div>