Alinhar verticalmente dois elementos lado a lado

rikaschmitt · Maio 27, 2015

Estou quebrando a cabeça para fazer dois elementos se alinharem verticalmente. É uma imagem seguida de um texto. Os dois elementos devem se alinhar verticalmente para que ambos fiquem centralizados, isso de acordo com o tamanho da tela/texto.

Exemplos:

Já tentei float, vertical-align, pseudo elemento para a imagem, mas nada adianta.. talvez esteja usando errado.

André do Vale · Maio 27, 2015

Tipo isso:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
	* {
		margin: 0;
		border: 0;
		padding: 0;
	}
	div {
		width: 400px;
		position: relative;
		background: #eee;
	}
	img {
		vertical-align: middle;
	}
	p {
		margin-left: 10px;
		display: inline-block;
		max-width: calc(100% - 70px);
		vertical-align: middle;
	}
</style>
</head>

<body>

<div>
<img src="http://placehold.it/50x50">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis expedita quia quam numquam, sapiente minima velit quas exercitationem ullam consequuntur eum nisi dolores consectetur doloremque veritatis assumenda dolorem natus excepturi!</p>
</div>

</body>
</html>

?

rikaschmitt · Maio 27, 2015

Ah, o segredo foi o "max-width", pois estava usando semelhante e quando o texto ficava maior, ele quebrava a linha.. humm... Valeu! Deu certo!

Entrar

Arquivado

Alinhar verticalmente dois elementos lado a lado

Recommended Posts

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

André do Vale 76

Compartilhar este post

Link para o post

Compartilhar em outros sites

rikaschmitt 54

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante