How to align text vertically next to image?

Asked

Viewed 312 times

1

Hello, what is missing in this code to align the text vertically next to the image, and each of the three smaller divs has an image and text.

* {
	margin:0; padding:0;
}
body
{
background: url("../IMAGENS/Art-photography-winter-snow-trees-bench_1366x768.jpg") no-repeat bottom center scroll;
overflow:hidden;

}
#corpo-form
{
	position:relative; width:480;	margin:130px auto 0px auto; background-color:rgba(0,0,0,0.4);
}

#corpo-form div
{
	display:block;
	height:100px;
	margin:10px;
	border-radius:5px;
	outline:none;
	background-color: rgba(255,255,255,0.7);
}
.menu{
	line-height:100px;
}
.menu img {
	height:100px; width:100px;
}
<html lang="pt-br">
<head>
	<title>Projeto</title>
	<link 	rel="stylesheet" href="CSS/css_main.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>	
</head>
<body>
<div id ="corpo-form">
	<form  method="POST">
	
		<h1>Menu</h1>

		<div class="menu">
			<img src="./IMAGENS/iconfinder_03_188727.png";
			<label class="configuracao">Configuraçoes do Aplicativo</label>
		</div>
		<div class="menu">
			<img src="./IMAGENS/lendo.jpg";
			<label class="leitura">Leitura</label>
		</div>
		<div class="menu">
			<img src="./IMAGENS/lupa.png";
			<label class="pesquisa">Pesquisa</label>
		</div>
		
		<br>
	</form>
	
</div>
</body>
</html>

html css

1 answer

0


There are some different ways to do this, but in your case I suggest you put in #corpo-form div one display:flex; with align-items: center; this will align the text vertically next to the image, and it will be easier to treat the responsiveness in the future.

* {
	margin:0; padding:0;
}
body
{
background: url("../IMAGENS/Art-photography-winter-snow-trees-bench_1366x768.jpg") no-repeat bottom center scroll;
overflow:hidden;

}
#corpo-form
{
	position:relative; width:480;	margin:130px auto 0px auto; background-color:rgba(0,0,0,0.4);
}

#corpo-form div
{
	display:flex;
	align-items: center;
	height:100px;
	margin:10px;
	border-radius:5px;
	outline:none;
	background-color: rgba(255,255,255,0.7);
}
.menu{
	line-height:100px;
}
.menu img {
	height:100px; width:100px;
}
<div id ="corpo-form">
	<form  method="POST">
	
		<h1>Menu</h1>

		<div class="menu">
			<img src="./IMAGENS/iconfinder_03_188727.png";>
			<label class="configuracao">Configuraçoes do Aplicativo</label>
		</div>
		<div class="menu">
			<img src="./IMAGENS/lendo.jpg";>
			<label class="leitura">Leitura</label>
		</div>
		<div class="menu">
			<img src="./IMAGENS/lupa.png";>
			<label class="pesquisa">Pesquisa</label>
		</div>
		
		<br>
	</form>
	
</div>

  • 1

    hugocsl...worked! vlw.

  • @Fernandes cool that worked out there

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.