Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>CSS Box Alignment: align-content on large block container</title>
<style title="Needed for automation; delete to review/debug">
@import "/fonts/ahem.css";
html { font: 15px/1 Ahem; max-width: 800px; }
</style>
<style>
.test { height: 3em; margin: 0.5em 1.25em; box-sizing: border-box;
/* show bounds of test box without interfering with margin-collapsing */
border-left: solid blue 5px;
/* ensure bullet follows first line */
display: list-item;
/* don't wrap, as that will throw off the reference */
white-space: nowrap; }
/* cram into 800x600 */
html { max-height: 600px; columns: 3 }
.wrapper { break-inside: avoid; border: solid 2px gray; }
/* predictability */
input { height: 4px; margin: 0; vertical-align: 4px; }
img { height: 8px }</style>
<body>
<div class="wrapper">
<div class="test" style="" title="start">
STRT
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 1em" title="center">
CNTR
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 2em" title="end">
ENDD
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="" title="baseline">
BSLN
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 2em" title="last baseline">
LBSL
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="" title="flex-start">
FSTR
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 2em" title="flex-end">
FEND
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="" title="unsafe start">
USTR
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 1em" title="unsafe center">
UCNT
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 2em" title="unsafe end">
UEND
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="" title="safe start">
SSTR
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 1em" title="safe center">
SCNT
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 2em" title="safe end">
SEND
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 1em" title="space-evenly">
SEVN
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="" title="space-between">
SBTW
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="padding-top: 1em" title="space-around">
SARN
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<div class="wrapper">
<div class="test" style="" title="normal">
NRML
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
<span>
x
<input type=checkbox>
<img src='../../support/swatch-orange.png'>
</div>
</div>
</div>
<p>
<button onclick="document.querySelector('style[title]').textContent = 'html { font-size: 12px; }'">Show Text</button>
</p>
</body>