Fórum Dúvida HTML - Iniciante #607742

26/01/2020

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

Curtir tópico

+ 0

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

Gostei + 0