Hugo de Sá Ferreira
-
Posts
2 -
Cadastrado em
-
Última visita
-
Hugo de Sá Ferreira alterou sua foto pessoal -
CSS Elementos não alinham com vertical-align
Hugo de Sá Ferreira respondeu ao tópico de Hugo de Sá Ferreira em Web e banco de dados
Não consegui fazer alinhamento de texto e ícone(img) de jeito nenhum! A solução que eu acabei encontrando depois de muita pesquisa foi utilizar uma fonte de símbolos. Segue o código e o resultado que obtive: <!DOCTYPE html-5> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> <link rel="stylesheet" href="fonticons/css/iconesdeteste.css" </head> <body> <div id="mySidebar" class="sidebar"> <div id="sidebar_blankspace"></div> <a href="#" style="margin-top: 70px;"> <span class="sidebar_item"> <i class="icon-home"></i> Inicio </span> </a> <br> <a href="#"> <span class="sidebar_item"> <i class="icon-user"></i> Opção 2 </span> </a> <br> <a href="#"> <span class="sidebar_item"> <i class="icon-folder"></i> Opção 3 </span> </a> <br> <a href="#"> <span class="sidebar_item"> <i class="icon-star"></i> Opção 4 </span> </a> </div> </body> body { background-color: orange; } .sidebar { position: fixed; height: 100%; width: 250px; background-color: black; padding: 0; margin: 0; top: 0; left: 0; } #sidebar_blankspace { background-color: red; width: 100%; height: 90px; } .sidebar_item { background-color: white; /*top right bottom left*/ padding: 10px 0px 10px 20px; font-size: 30px; font-family: Helvetica, monospace; color: #ababab; display: block; vertical-align: middle; } .sidebar_item i { font-size: 40px; } .sidebar a { text-decoration: none; color: black; display: ; vertical-align: middle; overflow-y: hidden; padding: 0; }
-
CSS Elementos não alinham com vertical-align
Hugo de Sá Ferreira postou um tópico em Web e banco de dados
Sou iniciante em HTML/CSS, estou estudando e quebrando a cabeça aqui para fazer uma sidebar/sidemenu. O texto que eu coloco nos botões nunca ficam alinhados com o ícone que eu coloco. <!DOCTYPE html-5> <head> <link rel="stylesheet" type="text/css" href="stylesheet.css"> </head> <body> <div id="mySidebar" class="sidebar"> <a href="#"> <span class="sidebar_item"> <img src="iconsgrey/HomeIcon.png" alt=""> <span>Início</span> </span> </a> <a href="#"> <span class="sidebar_item"> <img src="iconsgrey/PersonIcon.png" alt=""> <span>Opção 2</span> </span> </a> </div> </body> body { background-color: orange; } .sidebar { position: fixed; height: 100%; width: 250px; background-color: black; padding: 0; margin: 0; top: 0; left: 0; } .sidebar_item { background-color: white; /*top right bottom left*/ padding: 20px 30px 20px 20px; font-size: 30px; font-family: Helvetica, monospace; color: #ababab; display: block; vertical-align: middle; } .sidebar_item span { background-color: green; margin-top: 0px;} .sidebar img { max-width: 40px; max-height: 40px; width: auto; height: auto; padding-right: 20px; background-color: blue; margin: 0; } .sidebar a { text-decoration: none; color: black; display: block; }
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
