Everything centered

전부 가운데 정렬

Titles, body, home head and the 404 are all left-aligned. There is no screen with a giant centered “404” alone.

···
html
<main class="dont-wrap"><section class="dont-col"><p class="dsx-label"><b>하지 않는 것</b>설명용으로 그린 예</p><div class="dont-bad"><div class="dont-404"><div class="dont-404-n">404</div><div class="dont-404-t">길을 잃으셨나요?</div><span class="dont-404-b">홈으로</span></div><div class="dont-note">가운데에 큰 숫자 하나. 하지 않아요.</div></div></section><section class="dont-col"><p class="dsx-label"><b>대신</b>실제 렌더: KRDS NotFound simple — 왼쪽 정렬</p><div class="dont-real"><section class="nf nf--simple" data-astro-cid-ejhamjt5> <div class="container nf__inner" data-astro-cid-ejhamjt5> <p class="nf__code num" data-astro-cid-ejhamjt5>404 · 페이지 없음</p> <h1 class="nf__title" data-astro-cid-ejhamjt5>페이지를 찾을 수 없어요</h1> <p class="nf__desc" data-astro-cid-ejhamjt5>주소가 바뀌었거나 없어진 글이에요. 홈에서 주제별로 다시 찾아볼 수 있어요.</p> <a class="button nf__home" href="/" data-astro-cid-ejhamjt5>
홈으로 가기
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5238 16.0225C15.2048 16.3282 15.1941 16.8346 15.4998 17.1536C15.8055 17.4726 16.3119 17.4834 16.6309 17.1777L22.0336 12.0001L16.6309 6.82251C16.3119 6.51681 15.8055 6.52758 15.4998 6.84657C15.1941 7.16557 15.2048 7.67199 15.5238 7.97769L18.8857 11.1995L2.8 11.1995C2.35817 11.1995 2 11.5577 2 11.9995C2 12.4413 2.35817 12.7995 2.8 12.7995L18.8869 12.7995L15.5238 16.0225Z" fill="currentColor"></path></svg> </a> <div class="nf__latest" data-astro-cid-ejhamjt5> <section class="pl" aria-labelledby="nf-latest" data-astro-cid-bxkhhtcj> <h2 class="pl__title" id="nf-latest" data-astro-cid-bxkhhtcj="true">새로 올라온 글</h2> <div class="pl__list pl__list--number" data-astro-cid-bxkhhtcj> <article class="pc pc--number" data-astro-cid-dat744fk> <span class="pc__no num" aria-hidden="true" data-astro-cid-dat744fk>01</span>  <div class="pc__body" data-astro-cid-dat744fk>  <h3 class="pc__title" data-astro-cid-dat744fk="true"> <a href="/baby-food-allergy/" data-astro-cid-dat744fk>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3>  <p class="pc__meta num" data-astro-cid-dat744fk> <span class="pc__cat-inline" data-astro-cid-dat744fk>알레르기·위생</span> <time datetime="2026-10-13" data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden="true" data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 4분</span>   </p> </div> </article> <article class="pc pc--number" data-astro-cid-dat744fk> <span class="pc__no num" aria-hidden="true" data-astro-cid-dat744fk>02</span>  <div class="pc__body" data-astro-cid-dat744fk>  <h3 class="pc__title" data-astro-cid-dat744fk="true"> <a href="/baby-food-ingredient-order/" data-astro-cid-dat744fk>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3>  <p class="pc__meta num" data-astro-cid-dat744fk> <span class="pc__cat-inline" data-astro-cid-dat744fk>재료·영양</span> <time datetime="2026-10-13" data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden="true" data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 4분</span>   </p> </div> </article> <article class="pc pc--number" data-astro-cid-dat744fk> <span class="pc__no num" aria-hidden="true" data-astro-cid-dat744fk>03</span>  <div class="pc__body" data-astro-cid-dat744fk>  <h3 class="pc__title" data-astro-cid-dat744fk="true"> <a href="/baby-food-iron-beef/" data-astro-cid-dat744fk>이유식 소고기 언제부터? 철분 챙기는 법 총정리</a> </h3>  <p class="pc__meta num" data-astro-cid-dat744fk> <span class="pc__cat-inline" data-astro-cid-dat744fk>재료·영양</span> <time datetime="2026-10-13" data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden="true" data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 5분</span>   </p> </div> </article>  </div> </section>  </div> </div> </section></div></section></main>
css
.dont-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.dont-col{min-width:0}
.dont-col+.dont-col{border-left:1px dashed #a8a29e}
@media (max-width:599px){.dont-wrap{grid-template-columns:minmax(0,1fr)}.dont-col+.dont-col{border-left:0;border-top:1px dashed #a8a29e}}
@media (max-width:340px){.dont-wrap .dsx-label{display:flex}}
.dont-bad{padding:8px 16px 22px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:var(--c-text,#1c1917)}
.dont-bad *{box-sizing:border-box}
.dont-real{padding-bottom:12px}
.dont-note{margin-top:12px;font:12px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#6b645c}
:root.dark .dont-note{color:#a59c91}
.dont-card{background:#fff;color:#1f2937;border-radius:8px;padding:14px 16px;margin-bottom:12px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
.dont-card b{display:block;margin-bottom:4px}

.dont-404{text-align:center;padding:26px 8px}
.dont-404-n{font-size:84px;font-weight:800;line-height:1;color:#c7c2ba}
.dont-404-t{margin-top:10px;font-size:20px;font-weight:700}
.dont-404-b{display:inline-block;margin-top:16px;padding:9px 22px;border-radius:999px;background:#4f46e5;color:#fff;font-weight:700}

Centering looks neat for a short phrase, but across several lines every line starts in a different place and gets harder to read. A fully centered screen is also the stock look of AI landing pages and 404s. On these text-centered sites, left alignment is the default.

A machine check blocks it. check-ai-tells counts rules in the built styles that carry centered text (text-align: center) and fails above zero, so no pack can center body text, titles, the home head or the 404.

The 404 is the clearest case. Instead of a giant number alone, it shows a small “404 · page not found”, the title “Page not found”, a one-line explanation, a home button and the newest posts, in order from the left, so a lost reader can find where to go next.

When to use

Think of it when styling a 404 or an empty state to be “cute,” or when wanting to center a short phrase. Use left alignment and spacing instead.

Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.