<div class="centerflex">
<div class="logo">
<svg viewBox="0 0 232 40" width="232" aria-label="My Logo">
<path d="M10.8 39V18.8L17.2 33H23l6.4-14.2V39h10.5V.7H28.4l-8.3 18-8.3-18H.3V39h10.5zm55.5 0V26.3L79.5.7H68.1l-7 16.5L54 .7H42.9l13 25.5V39h10.5zm44 0v-9.2H92.9V.7H82.4V39h27.9zm20.5.3a18.9 18.9 0 0014-5.9 19.7 19.7 0 005.5-13.4A19.5 19.5 0 00145 6.5a18.4 18.4 0 00-14-6.1 19.2 19.2 0 00-14 5.9 19.4 19.4 0 00-.3 27 18.4 18.4 0 0014 6zm0-9.3a8.2 8.2 0 01-6.6-3.1c-.7-1-1.2-2-1.6-3.3a13 13 0 010-7.4c.3-1.2.9-2.3 1.6-3.3a8 8 0 016.6-3.1c1.5 0 2.8.3 3.9.8 1 .6 2 1.3 2.7 2.2.8 1 1.3 2 1.7 3.2a13 13 0 01-1.6 10.8A8 8 0 01131 30zm40.6 9.3c3.5 0 6.7-1.2 9.4-3.5V39h8.7V18.6h-15.8V26h6.7c-2.4 2.6-5 3.8-8.1 3.8a8 8 0 01-6.4-2.8c-.8-.8-1.4-1.9-1.8-3.1-.5-1.2-.7-2.6-.7-4.1 0-1.5.2-2.9.7-4a10 10 0 011.8-3.3 7.8 7.8 0 016.2-2.9c1.6 0 3.2.5 4.7 1.4 1.5 1 2.7 2.1 3.4 3.7l7.9-6c-.7-1.3-1.6-2.5-2.7-3.5a17.3 17.3 0 00-8-4.3 21.3 21.3 0 00-12.8.9 18.7 18.7 0 00-12 17.6c.1 3.1.6 6 1.6 8.4 1 2.4 2.4 4.5 4.1 6.2a17 17 0 006 3.8c2.2 1 4.6 1.4 7 1.4zm40.6 0a18.9 18.9 0 0014-5.9 19.7 19.7 0 005.5-13.4 19.5 19.5 0 00-5.3-13.5 18.4 18.4 0 00-14-6.1 19.2 19.2 0 00-14 5.9 19.4 19.4 0 00-.3 27 18.4 18.4 0 0014 6zm0-9.3a8.2 8.2 0 01-6.6-3.1c-.7-1-1.2-2-1.6-3.3a13 13 0 010-7.4c.3-1.2.9-2.3 1.6-3.3a8 8 0 016.6-3.1c1.5 0 2.8.3 3.9.8 1 .6 2 1.3 2.7 2.2.8 1 1.3 2 1.7 3.2a13 13 0 01-1.5 10.8A8 8 0 01212 30z" fill="#F09" fill-rule="nonzero"/>
</svg>
</div>
<nav aria-label="main">
<ul>
<li>Partners</li>
<li>About</li>
<li>Source</li>
<li>Contact</li>
</ul>
</nav>
</div>
:root {
/* ↓ Use these variables to customise the albatross. */
//--centerflex-gap: 3rem;
//--centerflex-threshold: 45rem;
}
.centerflex {
/* ↓ Save the large negative or large positive value to a variable */
--multiplier: calc((var(--centerflex-threshold, 38rem) - 100%) * 666);
display: flex;
flex-wrap: wrap;
align-items: center;
/* ↓ Multiply by -1 to make negative */
margin: calc(var(--centerflex-gap, 1rem) / 2 * -1) 0;
&:before {
content: "";
flex-grow: 666;
margin: 0;
/* ↓ If --multiplier is negative, use 0px instead */
flex-basis: Max(0px, var(--multiplier));
}
> * {
/* ↓ Half the value to each element, combining to make the whole */
margin: calc(var(--centerflex-gap, 1rem) / 2) auto;
&:first-child {
order: -1;
}
}
}
// Additional CSS Stuff. Not needed for the albatross
*, *:before, *:after {
box-sizing: border-box;
}
body {
padding: 1em;
background: linear-gradient(-135deg, #005, #001);
min-height: 100vh;
color: #fff;
}
.logo svg {
display: block;
max-width: 100%;
}
ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: -0.5em;
}
li {
margin: 0.5em;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.