Több wrapperes elrendezési séma CSS-ben

A fejlesztés során gyakran találkozunk olyan elrendezésekkel, ahol a blokkok háttere kitölti a teljes oldalszélességet, de a blokkok tartalma középre igazított. Itt egy példa egy ilyen elrendezésre:

Egy ilyen elrendezésben nem egy wrappert, hanem többet kell készítenünk - minden blokkhoz. Ezenkívül a wrapperen belül kell lennie egy másik blokknak is, amely a tartalom középre igazításáért felelős. Szükségünk van egy osztályra is, amely a háttérszínezést vezérli.

Az elrendezésünk általános sémája a következőképpen fog kinézni:

<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>
<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>

A center osztályt a blokkok középre igazítására használjuk:

.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}

A line osztályt a blokkok színezésére használjuk:

.wrapper.line {
	background-color: #008040;
	color: white;
}

A wrapper osztály pedig minden egyes blokk szülője lesz. Ezt használjuk a blokkok közötti távolság beállításához:

.wrapper {
	margin-bottom: 30px;
}

Most írjuk meg a feladatunk teljes kódját:

<div class="wrapper">
	<div class="center">
		<h1>Főoldal fejléc</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Cégünk</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Áraink</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Kapcsolataink</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

* {
	box-sizing: border-box;
}
body {
	margin: 0;
}

.wrapper {
	margin-bottom: 30px;
}
.wrapper.line {
	background-color: #008040;
	color: white;
}
.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}
.wrapper h1 {
	margin: 0;
	font: 40px "Times New Roman";
}
.wrapper h2 {
	margin: 0;
	font: 25px "Times New Roman";
}
.wrapper p {
	font: 16px/1.4 Arial;
	text-align: justify;
}