28 lines
508 B
Text
28 lines
508 B
Text
|
<style>
|
||
|
|
.Aligner {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Aligner-item {
|
||
|
|
max-width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Aligner-item--top {
|
||
|
|
align-self: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Aligner-item--bottom {
|
||
|
|
align-self: flex-end;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="Aligner">
|
||
|
|
<div class="Aligner-item Aligner-item--top">…</div>
|
||
|
|
<div class="Aligner-item">…</div>
|
||
|
|
<div class="Aligner-item Aligner-item--bottom">…</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- From https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ -->
|