Entrar Ainda não tem acesso?
2
respostas

Como centralizar as colunas de imagens?

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Desafios finais e atividade Conferindo o projeto final

por KERGINALDO MATTOS
| 50k xp | 21 posts
Analista de Sistemas

Qual seria a melhor maneira de centralizar as colunas de imagens, se eu não usar cada bloco com 45%. Por exemplo, criei as caixas responsivas, para isso o tamanho foi 400px. Elas vão empilhando lateralmente se eu for redimensionando a página, que é um resultado desejado. Se ficar bem estreita, fica apenas 1 coluna, porém qualquer disposição fica sempre alinhada a esquerda.

Como fazer com que essas colunas fiquem centralizadas no espaço em branco entre o lado esquerdo da página e a barra direita de menus?

2 respostas
por Marco Bruno
| 362.1k xp | 794 posts
Desenvolvedor e Instrutor

Olá, Kerginaldo.

Se você quer centralizar as imagens basta definir a propriedade text-align: center;no pai que envolve as imagens. Por exemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    .wrap-photo {
      text-align: center;
    }
    .photo {
      margin: 0 10px 10px;
    }
  </style>
</head>
<body>
  <section class="wrap-photo">
    <img class="photo" src="http://placehold.it/350x150" alt="Imagem de exemplo">
    <img class="photo" src="http://placehold.it/350x150" alt="Imagem de exemplo">
    <img class="photo" src="http://placehold.it/350x150" alt="Imagem de exemplo">
    <img class="photo" src="http://placehold.it/350x150" alt="Imagem de exemplo">
    <img class="photo" src="http://placehold.it/350x150" alt="Imagem de exemplo">
    <img class="photo" src="http://placehold.it/350x150" alt="Imagem de exemplo">
    <img class="photo" src="http://placehold.it/350x150" alt="Imagem de exemplo">
  </section>
</body>
</html>

Se não resolver avisa que pensamos em outra situação :-)

por KERGINALDO MATTOS
| 50k xp | 21 posts
Analista de Sistemas

Ele alinhou o texto de descrição de cada bloco, mas não os blocos. Segue o código. Se rodar esse código dá pra ver que os blocos de imagem/texto ficam alinhados a esquerda, gostaria deles centralizados no meio da área disponível

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="favicon.png">
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="site.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
        <style>
figure { 
    float: left;
    display: inline-block;
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: 16px;
    margin-right: 16px;
    padding: 10px;
    border: solid;
    border-width: 8px;
    width: 350px;
}
figure img {
    width: 100%;
}
    .centraliza {
      text-align: center;
    }
        </style>

    </head>

    <body>
        <main>
            <h1 class="titulo-principal">Portfolio</h1>
            <div class="centraliza">
            <figure>
                <img src="bmw.png" alt="Trabalho para BMW">
                <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>
            </figure>

            <figure>
                <img src="ibm.png" alt="Trabalho para IBM">
                <figcaption>Fig.2 - A view of the IBM.</figcaption>
            </figure>

            <figure>
                <img src="g1.png" alt="Trabalho para IBM">
                <figcaption>Fig.3 - G1.</figcaption>
            </figure>            


            <figure>
                <img src="uol.png" alt="Trabalho para IBM">
                <figcaption>Fig.4 - UOL.</figcaption>
            </figure>        
            </div>

        </main>
        <img src="eu.jpg" alt="Foto de João da Silva" class="minha-foto">
        <aside class="navegacao-site">
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="bio.html">Sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
            <ul class="icones-redes-sociais">
                <li>
                    <a class="github" href="https://github.com/joaodasilva">
                        Github
                    </a>
                </li>
                <li>
                    <a class="twitter" href="https://twitter.com/joaodasilva">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        LinkedIn
                    </a>
                </li>
            </ul>
        </aside>
        <footer class="rodape-pagina">
            &copy; João da Silva 2014
        </footer>
    </body>
</html>