1

Preciso alinhar duas imagens de modo que fiquem centralizadas, com uma descrição em baixo.

Tentei algo como:

<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>

O resultado está funcionando conforme esperado, mas acredito que não é a maneira correta de se fazer, pois acredito que em monitores de outras resoluções o resultado será diferente. Como posso fazer de maneira mais inteligente?inserir a descrição da imagem aqui

2 Respostas 2

1

Jovem seu CSS precisa de várias mudanças, vc não deve alinhar os objetos usando margin:580px por exemplo. Para isso crie um "container" que vai ser o "pai" desses objetos e coloque o que estiver dentro do container alinhado ao centro, assim vai sempre ficar alinhado independente do tamanho da tela do usuário.

Veja como o código abaixo, ele é bem simples e resolve o seu problema com poucas linhas de CSS, nem mexi no HTML, só criei a <div class="container"> para colocar os Thumbs dentro centralizados.

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>

1

Realmente, usando margin-left não é a melhor opção porque ele vai ficar torto em tamanhos de tela diferentes do seu. Minha sugestão é o uso de 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>

E o seu HTML vai ficar algo como:

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .