Dúvida HTML - Iniciante

26/01/2020

0

Boa noite a todos, comecei a estudar HMTL a alguns dias e estou com algumas dúvidas. Dentre elas, queria saber uma maneira de centralizar as imagens dentro de cada uma das li. Achei que o margin: auto faria isso, mas não da certo.


Código HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css" />

</head>

<body>

<header id="menu-principal">
<main>
<img id="logo" src="img/logo.png" />
<ul>
<a href="http://www.google.com.br" target="_blank">
<li id="feed"><img id="feed" src="img/feed.png" /></li>
</a>
<a href="http://www.facebook.com.br" target="_blank">
<li id="facebook"><img id="facebook" src="img/facebook.png" /></li>
</a>
<a href="http://www.twitter.com.br" target="_blank">
<li id="twitter"><img id="twitter" src="img/twitter.png" /></li>
</a>
<a href="http://www.linkedin.com.br" target="_blank">
<li id="linkedin"><img id="linkedin" src="img/linkedin.png" /></li>
</a>
</ul>
</main>
</header>

</body>

</html>


Código CSS

@charset "UTF-8";

body{
height: 100%;
width: 100%;
}
header#menu-principal {
background-color: #252323;
height: 60px;
}

header#menu-principal main {
width: 980px;
margin: 0 auto;
height: 100%;
}
header#menu-principal img#logo {
padding: 18.5px;
display: block;
float: left;
}
header#menu-principal main ul{
display: block;
float: right;
height: 100%;
box-sizing: border-box;
width: 280px;
margin: 0px;
}
header#menu-principal main ul li{
float: left;
display: inline-block;
box-sizing: border-box;
transition: margin-top 0.2s;
width: 40px;
height: 100%;
margin-top: auto;
padding: 17px;

}
header#menu-principal main ul li#feed:hover {
margin-top: 5px;
}
header#menu-principal main ul li#facebook:hover {
margin-top: 5px;
}
header#menu-principal main ul li#twitter:hover {
margin-top: 5px;
}
header#menu-principal main ul li#linkedin:hover {
margin-top: 5px;
}
Filipe Barbosa

Filipe Barbosa

Responder

Posts

27/01/2020

Manoel Junior

Bom dia, segue um exemplo que desenvolvi:
<html>
 <body>
  <ul>
   <li>  
    <center>    
     <img src="https://img.discogs.com/NVUMIBUvY4_3yfBbyrzL9F2mc7I=/fit-in/300x300/filters:strip_icc():format(jpeg):mode_rgb():quality(40)/discogs-images/R-11960182-1525523307-1823.jpeg.jpg" width="300px"/>
    </center>
   </li>
   <li>  
    <center>    
     <h4>Center Image</h4>
    </center>
   </li>   
  </ul>
 </body>
</html>
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar