Alinhamento vertical com CSS


(THAILAN R. DA C. GODOY) #1

Boa tarde Galera,

Será que vocês conseguem me dar uma luz. Como faço para alinhar texto e imagem verticalmente?

Segue as informações abaixo.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link href="css.css" rel="stylesheet">
</head>
<body>

	<header>
		<nav>
			<ul>
				<li><a href="">Gmail</a></li>
				<li><a href="">Imagens</a></li>
				<li class="iconMenu"><a href=""><img src="image/menu.png" alt=""></a></li>
				<li class="iconPerf"><a href=""><img src="image/thailan.jpg" alt=""></a></li>
			</ul>
		</nav>
	</header>
	<section>
		<h1>Google</h1>
		<form action="">
			<input type="text" placeholder="Pesquisa no Google ou escreva um URL">
			<button>Pesquisa Google</button><button>Estou com sorte</button>
		</form>
	</section>
	
</body>
</html>
*{
	margin:0;
	border:0;
	padding:0;
}
a{
	text-decoration:none;
	color:#000000;
}
ul{
	list-style:none;
}
body{
	background-color:#ffffff;
}
header nav{
	display:flex;
	justify-content:flex-end;
}
header ul{
	margin-right:19px;

}
header ul li{
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	margin-left:13px;
	margin-top:12px;
}
header li a{
	font-family:'Segoe UI', 'Roboto', arial, sans-serif;
	color:#000000;
	font-size:13px;
}
header li a:hover{
	text-decoration:underline;
	color:#929292
}
.iconMenu img{
width:15px;
border:3px solid transparent;
}
.iconMenu img:hover{
border:3px #f0f0f0 solid;
background-color:#f0f0f0;
}

.iconPerf img{
width:30px;
height:31px;
-webkit-border-radius:80px;
-moz-border-radius:80px;
border-radius:80px;
border:3px solid transparent;
}
.iconPerf img:hover{
border:3px #f0f0f0 solid;
}
section{
	width:600px;
	margin:auto;
	justify-content:center;
	text-align:center;
}
section h1{
	font-size:64px;
	color:#000000;
	margin-top:116px;
}
section form{
	margin-top:42px;
}
section input, section input:focus{
	width:100%;
	border-radius:30px;
	box-shadow:#9d9e9f 1px 1px 2px;
	border:1px solid #9d9e9f;
	height:46px;
	padding:10px;
	outline:none;
	box-sizing:border-box;
}
section input:focus{
	color:#000000;
}
section button{
	margin-top:45px;
}**texto em negrito**

image