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>
	

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

Compatibilité

• Internet Explorer 7, 8, 9
• Firefox 3.6, 4
• Chrome/Chromium 9, 11
• Opera 11
• Safari 5
• Epiphany 2
• Conkeror

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é

• Internet Explorer 8, 9
• Firefox 3.6, 4
• Chrome/Chromium 9, 11
• Opera 11
• Safari 5
• Epiphany 2
• Conkeror

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>
	

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

Compatibilité

• Internet Explorer 7, 8, 9
• Firefox 3.6, 4
• Chrome/Chromium 9, 11
• Opera 11
• Safari 5
• Epiphany 2
• Conkeror

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>
	

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

Compatibilité

• Internet Explorer 7, 8, 9
• Firefox 3.6, 4
• Chrome/Chromium 9, 11
• Opera 11
• Safari 5
• Epiphany 2
• Conkeror

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>
	

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

Compatibilité

• Firefox 3.6, 4
• Internet Explorer 7, 8, 9
• Chrome/Chromium 9, 11
• Opera 11
• Safari 5
• Epiphany 2
• Conkeror