Ir ao conteúdo
  • Cadastre-se

CSS como ajustar imagem na barra lateral fixa css+html?


Ir à solução Resolvido por Alexsander Gutierrez,

Posts recomendados


.barrafixa{

  height: 45% ;

  width: 60px ;

  margin-top: 85px;

  position: fixed;

  margin: 150px;

  top: 0px auto ;

  left: 0px;

  background-color: #DAA520 ;

  padding-top: 0 10px ;
  
  </style>  
                         
</head>
<body>
  
  <div class= "barrafixa">
 <a href="https://www.instagram.com/"><img width= "50px" src="data:image/jpeg;

como faço p centralizar esses ícones? tentei usando aling="center", mas não foi 😕

barra fixa.PNG

Link para o comentário
Compartilhar em outros sites

  • Solução
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .barrafixa{
            height: 45%;
            width: 60px;
            margin-top: 85px;
            position: fixed;
            margin: 150px;
            top: 0px;
            left: 0px;
            background-color: #DAA520 ;
            padding: 10px;
          	/** Adicionado **/
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>
<body>
    <div class="barrafixa">
        <a href="https://www.instagram.com/">
            <img width= "50px" src="url da image aqui"/>
        </a>
        <a href="https://www.instagram.com/">
            <img width= "50px" src="url da image aqui"/>
        </a>
        <a href="https://www.instagram.com/">
            <img width= "50px" src="url da image aqui"/>
        </a>
        <a href="https://www.instagram.com/">
            <img width= "50px" src="url da image aqui"/>
        </a>
    </div>
</body>
</html>


    
    

Olá boa noite, você pode ajustar as imagens adicionando as propriedades display: flex; align-items: center; flex-direction: column; na barra fixa, ou como no caso as imagens dentro de uma tag âncora que por padrão são elementos de linha, você simplesmente pode adicionar um text-align: center que vai centraliza-las, segue o código de exemplo que fiz.

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...