0

Eu sei que pra alinhar um texto se usa o text-align: center.

Mas e pra alinhar uma foto que tem um link nela? Eu fiz uns testes aqui com uns comandos que eu n conheço tipo o align-content, pra ver se dava certo, mas n deu. Tenho duas perguntas.

1° Como alinha uma foto que tenha um link dentro, no centro da página?

2° Essa linha está certa? Para posteriormente colocar o código de alinhamento dentro dela.

 .imagem {}

Edit: Eu tentei colocar o margin:auto, na div da imagem, mas n funcionou, n fez alteração alguma.

Html:

<!DOCTYPE html>
<html>
<head>
    <title>sas</title>
    <link rel="stylesheet" type="text/css" href="sasi.css">
</head>
<body>

    <div class="imagem">

        <a href="#"><img src="https://lh3.googleusercontent.com/l6JAkhvfxbP61_FWN92j4ulDMXJNH3HT1DR6xrE7MtwW-2AxpZl_WLnBzTpWhCuYkbHihgBQ=w640-h400-e365" width="50%" height="50%"></a>

    </div>

</body>
</html>

Css:

.imagem {
    margin:auto; //aplica margem aos quatro lados
    width:200px;
}
6
  • Se a div não tiver um tamanho definido ela será 100% da pagina verticalmente ou 100% da outra div, mas como você não apresentou o código completo não é possível saber o que está causando o problema
    – Mark Vaaz
    Commented 18/08/2018 às 20:20
  • @MarkVaaz Eu coloquei o seu codigo nesse arquivo, realmente n funcionou o margin: center. Eu alterei o tamanho da imagem de 100% para 50%, pq em 100% a imagem ficava do tamanho da tela, e n dava pra saber se o codigo pra centralizala no meio da pagina teria dado certo.
    – jim
    Commented 18/08/2018 às 20:22
  • @MarkVaaz Exatamente.
    – jim
    Commented 18/08/2018 às 20:23
  • sasi é o arquivo css? não seria sasi.css? e não existe margin center, para centralizar horizontalmente se usa margin:auto; ou margin:10px auto; 10px para definir margem de 10px verticalmente, não precisa ser necessariamente 10px, você pode definir a quantidade que preferir
    – Mark Vaaz
    Commented 18/08/2018 às 20:25
  • @MarkVaaz Sim, eu esqueci de colocar o .css. Eu coloquei agr, mas n mudou nada. É o certo é margin: auto, como vc disse, eu so me confudi na hora que escrevi o comentario. Esse codigo que colei ai, vc testou pra ver se centralizava no meio?
    – jim
    Commented 18/08/2018 às 20:39

1 Resposta 1

3
  • Você pode colocar a imagem dentro de uma div definir uma classe para essa div e adicionar margin:0 auto ao css para alinhar a imagem no centro da pagina ou de uma outra div.

Saiba mais sobre margin aqui

Exemplo:

.imagem {
    margin:0 auto; /* margem vertical definida como 0 e horizontal automática */
    width:200px;
}
<!DOCTYPE html>
<html>
<head>
    <title>sas</title>
    <link rel="stylesheet" type="text/css" href="sasi.css">
</head>
<body>

    <div class="imagem">

        <a href="#"><img src="https://lh3.googleusercontent.com/l6JAkhvfxbP61_FWN92j4ulDMXJNH3HT1DR6xrE7MtwW-2AxpZl_WLnBzTpWhCuYkbHihgBQ=w640-h400-e365" width="100%"></a>

    </div>

</body>
</html>

Exemplo com css diretamente no HTML:

<!DOCTYPE html>
<html>
<head>
    <title>sas</title>
<style type="text/css">
.imagem {
    margin:0 auto; /* margem vertical definida como 0 e horizontal automática */
    width:200px;
}
</style>
</head>
<body>

    <div class="imagem">

        <a href="#"><img src="https://lh3.googleusercontent.com/l6JAkhvfxbP61_FWN92j4ulDMXJNH3HT1DR6xrE7MtwW-2AxpZl_WLnBzTpWhCuYkbHihgBQ=w640-h400-e365" width="100%"></a>

    </div>

</body>
</html>

O 0 em margin:0 auto; representa o valor vertical, você pode adicionar 50px para definir o valor verticalmente, ou quantos pixels for necessário.

Exemplo de margem definindo diferentes tamanhos para cada lado:

margin: 25px 50px 75px 100px;

  • superior está como: 25px
  • direita está como: 50px
  • inferior está como: 75px
  • esquerda está como: 100px

Note que se a div não tiver um tamanho definido o valor dela verticalmente será de 100% da pagina ou de um outro elemento pai, caso seja 100% não é possível centralizar usando margin.

5
  • Eu conheço e uso a propriedade magin, o básico pelo menos. Eu n tenho ctz se foi vc que n entendeu direito, ou se foi eu. Eu consigo alinha a foto no centro da página, usando o margin, mas pra isso eu preciso fazer certas contas matematicas, não que isso seja um problema, mas eu queria saber se tem como simplificar isso. Entao, eu estava querendo saber se tem como alinhar automaticamente uma imagem no centro da página, tipo o text-align. Eu tentei usar o margin: 0 auto; e margin; auto, como vc disse, mas n funcionou, a imagem so sai do lugar depois que eu coloco algum valor dentro do margin.
    – jim
    Commented 18/08/2018 às 21:56
  • Como você pode ver no snippet e os detalhes da resposta, o margin:0 auto; funciona perfeitamente, você está fazendo algo de errado no seu código...
    – Mark Vaaz
    Commented 18/08/2018 às 22:00
  • @DiogenesSilva atualizei a resposta com o css no HTML
    – Mark Vaaz
    Commented 18/08/2018 às 22:05
  • Eu consegui, a imagem n estava centralizando por causa disso "//aplica margem aos quatro lados" essa frase estava nessa linha .imagem { margin: 0 auto; //aplica margem aos quatro lados. Obriago pela ajuda! width:200px; }
    – jim
    Commented 18/08/2018 às 22:43
  • você estava usando o código desatualizado... eu ja tinha atualizado a resposta
    – Mark Vaaz
    Commented 18/08/2018 às 22:44

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 .