<div class="lab-container">
<div class="content-wrapper">
<div class="content">
<h1 class="lab-title">Centered Web layouts with CSS</h1>
<p>This page demonstrates the centered web layout accomplished with just CSS. How did I do that? Read the <a href="/blog/css-centered-layout/" target="_blank" rel="external noopener">full tutorial here</a>.</p>
<div class="dummy-lines"></div>
<figure>
<img decoding="async" src="https://cdn.w3bits.com/content/images/centered-layout-example.jpg" alt="Example of a centered web layout">
<figcaption>This is how a centered website looks like</figcaption>
</figure>
<div class="dummy-lines"></div>
<div class="dummy-lines"></div>
<div class="dummy-lines"></div>
</div><!-- .content -->
</div><!-- .content-wrapper -->
</div>
:root {
--accent: #227093;
}
.content-wrapper {
background-color: white;
padding: 8rem 2em;
max-width: 960px;
margin-right: auto;
margin-left: auto;
}
.dummy-lines {
width: 100%;
height: 64px; /* Total height for 3 lines + spacing */
background:
/* Line 1: Full width */
linear-gradient(#e0e0e0, #e0e0e0) no-repeat 0px 0px / 100% 12px,
/* Line 2: 90% width */
linear-gradient(#e0e0e0, #e0e0e0) no-repeat 0px 24px / 90% 12px,
/* Line 3: 65% width (paragraph end) */
linear-gradient(#e0e0e0, #e0e0e0) no-repeat 0px 48px / 65% 12px;
}
.content p,
.content .dummy-lines,
.content h1 {
margin-right: auto;
margin-left: auto;
font-size: 1.2rem;
max-width: 600px;
}
.content p:first-of-type {
text-align: center;
}
.content h1 {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 1em;
text-align: center;
}
.content p + p,
.content .dummy-lines + .dummy-lines {
margin-top: 1.5rem;
}
.content p + .dummy-lines {
margin-top: 2rem;
}
.content figure {
margin-top: 3em;
margin-bottom: 3em;
}
.content figure img {
border-radius: .5rem;
display: block;
margin-right: auto;
margin-left: auto;
}
.content figcaption {
margin-top: 1em;
font-size: 14px;
text-align: center;
}
