vertical-align

Une image dans un bloc

CSS

	
	p {
		height: 100px;
		width: 200px;
		line-height: 100px;
		text-align: center;
		background-color: #8cc03b;
		}

	img {
		vertical-align: middle;
		}
	

HTML

	
	<p>
		<img src="image.png" alt="" />
	</p>
	

ImportantPour IE 7 : l'image doit être entourée d'espaces, d'indentations ou d'un élément inline

Compatibilité

Une ligne dans un bloc

CSS

	
	p {
		height: 100px;
		width: 200px;
		line-height: 100px;
		text-align: center;
		background-color: #8cc03b;
		}
	

HTML

	
	<p>Lorem ipsum</p>
	

Compatibilité

Un texte dans un bloc

CSS

	
	div {
		height: 100px;
		width: 200px;
		line-height: 100px;
		text-align: center;
		background-color: #8cc03b;
		}

	p {
		width: 150px;
		border: 1px solid #474747;
		vertical-align: middle;
		display: inline-block;
		line-height: 1em;
		text-align: left;
		}
	

HTML

	
	<div>
		<p>
			Lorem ipsum dolor sit amet...
		</p>
	</div>
	

ImportantPour IE 7 : l'image doit être entourée d'espaces, d'indentations ou d'un élément inline

Compatibilité

Un bloc dans un bloc

CSS

	
	div {
		height: 100px;
		width: 200px;
		line-height: 100px;
		text-align: center;
		background-color: #8cc03b;
		}

	div div {
		width: 150px;
		border: 1px solid #474747;
		vertical-align: middle;
		display: inline-block;
		line-height: 1em;
		text-align: left;
		}
	

HTML

	
	<div>
		<div>
			<p>Lorem ipsum dolor...</p>
		</div>
	</div>
	

ImportantPour IE 7 : commentaire conditionnel div div { display: inline; }

Compatibilité

Deux blocs dans un bloc

CSS

	
	div {
		width: 200px;
		text-align: center;
		background-color: #8cc03b;
		}

	div div {
		width: 75px;
		border: 1px solid #474747;
		vertical-align: middle;
		display: inline-block;
		text-align: left;
		}
	

HTML

	
	<div>
		<div>
			<p>Lorem ipsum dolor sit amet,</p>
		</div>
		<div>
			<p>consecteteur adipisicing</p>
		</div>
	</div>
	

ImportantPour IE 7 : commentaire conditionnel div div { display: inline; }

Compatibilité

Page de tests