CSS alinhar objetos de uma li

WilliamNascimento · 19 de maio de 2020

Estou iniciando no HTML e CSS , nao estou conseguindo alinhas os item da lista junto com a imagem .

<body>
	<div id = "menu">
	<ul>
	<img src="C:\Users\William\Pictures\testeimagem.png">
	<li><a href="#">CONTATO</a></li>
	<li> <a id =href="#">ANIMES</a> </li>
	<li> <a href="#">PEDIDOS</a> </li>
	<li> <a href="#">ADMINISTRACAO</a> </li>
	<li><a href="#"> CALENDARIO</a></li>
	</ul>
	</div>
</body>
</html>

<style>
		body {
			margin: 0;
		}
		#menu ul {
			margin: 0;
			background-color: #000000;
		}
		#menu ul li {
			display: inline;

		}
		#menu ul li a 
		{
			padding: 5px 50px ;
			display: inline-block;
			color: white;
			text-decoration: none;

		}
		#menu ul li a:hover
		{
			color: #FF0000;
		}

	</style>

Luís Roberto C. da Silva · 19 de maio de 2020

Adicione esse código ao css:

#menu img{
	vertical-align: middle;
}

WilliamNascimento · 19 de maio de 2020

7 minutos atrás, Luís Roberto C. da Silva disse:
Adicione esse código ao css:
#menu img{
	vertical-align: middle;
}

Obrigado , nao ficou totalmente alinhado com a imagem , no caso eu devo alterar o tamanho da imagem , ou consigo ao invés de middle alterar manualmente ex: 20px , procurei aqui no google apos seu comentario e apenas achei com opções como Top etc

Utilizando isto ele ajusta a imagem ou os item da minha lista ?

DiF · 19 de maio de 2020

@WilliamNascimento Você quer alinhar deixando o texto centralizado no elemento?

Use o line-height no elemento <li> e defina o height de 50px para o UL

https://www.w3schools.com/cssref/pr_dim_line-height.asp

Basicamente, você precisa colocar o line-height com o mesmo height do elemento ul

Assim, você deixa o texto exatamente no meio do elemento alinhado com o meio da imagem

Já a imagem, você deixa pelo menos com o mesmo height também.

https://jsfiddle.net/dife/7yewq0sv/4/

WilliamNascimento · 19 de maio de 2020

42 minutos atrás, DiF disse:

@WilliamNascimento Você quer alinhar deixando o texto centralizado no elemento?

Use o line-height no elemento <li> e defina o height de 50px para o UL

https://www.w3schools.com/cssref/pr_dim_line-height.asp

Basicamente, você precisa colocar o line-height com o mesmo height do elemento ul

Assim, você deixa o texto exatamente no meio do elemento alinhado com o meio da imagem

Já a imagem, você deixa pelo menos com o mesmo height também.

https://jsfiddle.net/dife/7yewq0sv/4/

Vou dar uma olhada neste metodo tambem , fiz pelo do amigo acima apenas nao entendi como funcionar , #menu img seria para formatar as imagem do menu certo ? Se for o caso porque a imagem permanece imovel e apenas modifica os objetos da lista ?

////// OUTRA AJUDA EDITANDO TOPICO