How to align the font icons and text in a circle? - html

Question

I'm working for a couple of hours to align the font icons and text within the CSS below. It doesn't really sound like a hard thing to do. The aligning is based on a 'circle', and after a while playing with the CSS, I end up pretty confused.. So I hope someone else has experienced this and knows a way how to align them correctly, in the middle..
.css-menu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
margin: 10px auto 0;
width: 100%;
max-width: 568px;
height: 0;
}
.css-menu>div {
position: relative;
margin-bottom: 250px;
padding-bottom: 100%;
max-width: 100%;
height: 0;
}
.css-menu * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.css-menu input {
position: absolute;
display: none;
}
.css-menu .segment {
position: absolute;
z-index: 100;
left: 50%;
top: 50%;
margin-left: -48%;
margin-top: -48%;
width: 96%;
height: 96%;
border-radius: 50%;
overflow: hidden;
transform: scale(0);
transition: 0.5s cubic-bezier(.58, 2.4, 0.5, 0.5);
transition: 0.5s ease;
}
.css-menu .curve-upper {
position: absolute;
left: 1%;
top: 1%;
width: 98%;
height: 98%;
background: #fff;
border-radius: 50%;
transform: scale(0);
transition: 0s;
}
.css-menu .curve-lower {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
transform: rotate(-130deg) scale(0);
transition: 0s;
}
.css-menu .curve {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
background: #000;
transform-origin: left top;
transform: rotate(0deg) skewY(45deg);
}
.css-menu .segment label {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
background: #567a98;
border: 1px solid #fff;
cursor: pointer;
transform-origin: left top;
transition: 0.25s cubic-bezier(0, 0, 1, 1);
transition: 0.25s ease;
}
.css-menu .segment label span {
display: block;
position: absolute;
left: 0;
top: 0;
right: 35%;
bottom: 25%;
margin: auto;
width: 35px;
height: 100px;
font-size: 3rem;
font-weight: normal;
color: #fff;
}
.fab:after {
content: attr(data-label);
font-family: 'Nexa Light', sans-serif;
font-size: 14px;
font-weight: 700;
margin-top: 10px;
color: #fff;
display: block;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.css-menu .segment label:nth-of-type(1) {
transform: rotate(-135deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(2) {
transform: rotate(-90deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(3) {
transform: rotate(-45deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(4) {
transform: rotate(-0deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(5) {
transform: rotate(45deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(6) {
transform: rotate(90deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(7) {
transform: rotate(135deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(8) {
transform: rotate(180deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(1) span {
transform: skewY(-45deg) rotate(135deg);
}
.css-menu .segment label:nth-of-type(2) span {
transform: skewY(-45deg) rotate(90deg);
}
.css-menu .segment label:nth-of-type(3) span {
transform: skewY(-45deg) rotate(45deg);
}
.css-menu .segment label:nth-of-type(4) span {
transform: skewY(-45deg) rotate(0deg);
}
.css-menu .segment label:nth-of-type(5) span {
transform: skewY(-45deg) rotate(-45deg);
}
.css-menu .segment label:nth-of-type(6) span {
transform: skewY(-45deg) rotate(-90deg);
}
.css-menu .segment label:nth-of-type(7) span {
transform: skewY(-45deg) rotate(-135deg);
}
.css-menu .segment label:nth-of-type(8) span {
transform: skewY(-45deg) rotate(-180deg);
}
.css-menu .center {
display: block;
position: absolute;
z-index: 200;
left: 50%;
top: 50%;
margin-left: -17.5%;
margin-top: -17.5%;
width: 35%;
height: 35%;
border-radius: 50%;
background: #000;
overflow: hidden;
box-shadow: 0 0 0 2px #fff;
}
.css-menu .holder .segment {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 0.5s ease;
transform: scale(1);
}
.css-menu .holder .center {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 0.5s ease;
transform: scale(1.2);
}
.css-menu .holder .curve-upper {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 1s ease;
transform: scale(1);
}
.css-menu .holder .curve-lower {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 1s ease;
transform: rotate(-135deg) scale(1);
}
.css-menu #c1:checked~.holder .segment label:nth-of-type(1),
.css-menu #c2:checked~.holder .segment label:nth-of-type(2),
.css-menu #c3:checked~.holder .segment label:nth-of-type(3),
.css-menu #c4:checked~.holder .segment label:nth-of-type(4),
.css-menu #c5:checked~.holder .segment label:nth-of-type(5),
.css-menu #c6:checked~.holder .segment label:nth-of-type(6),
.css-menu #c7:checked~.holder .segment label:nth-of-type(7),
.css-menu #c8:checked~.holder .segment label:nth-of-type(8) {
background: #45acea;
}
.css-menu #c1:checked~#toggle:checked~.holder .curve-lower {
transform: rotate(-135deg)
}
.css-menu #c2:checked~#toggle:checked~.holder .curve-lower {
transform: rotate(-90deg)
}
.css-menu #c3:checked~#toggle:checked~.holder .curve-lower {
transform: rotate(-45deg)
}
.css-menu #c4:checked~#toggle:checked~.holder .curve-lower {
transform: rotate(0deg)
}
.css-menu #c5:checked~#toggle:checked~.holder .curve-lower {
transform: rotate(45deg)
}
.css-menu #c6:checked~#toggle:checked~.holder .curve-lower {
transform: rotate(90deg)
}
.css-menu #c7:checked~#toggle:checked~.holder .curve-lower {
transform: rotate(135deg)
}
.css-menu #c8:checked~#toggle:checked~.holder .curve-lower {
transform: rotate(180deg)
}
.css-eye {
display: block;
width: 100%;
height: 100%;
background-color: white;
border: 0.25em solid black;
border-radius: 50%;
position: relative;
box-shadow: 0.03em 0.14em rgba(0, 0, 0, 0.1);
animation: blink forwards infinite 10s ease-in-out;
z-index: 205;
}
.css-pupil {
position: absolute;
margin-left: 25%;
margin-top: 25%;
width: 50%;
height: 50%;
font-size: 200px;
border-radius: 50%;
background-color: black;
border: 0.1em solid #00aeef;
box-shadow: 0 0 0 0.02em black;
box-sizing: border-box;
will-change: transform;
transition: transform 200ms 300ms ease-in-out;
}
#keyframes blink {
0%,
2%,
60%,
62%,
100% {
transform: scaleX(1) scaleY(1);
}
1%,
61% {
transform: scaleX(1.3) scaleY(0.1);
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="screen">
<div class="css-menu">
<div>
<input type="radio" id="c1" name="segment" checked>
<input type="radio" id="c2" name="segment">
<input type="radio" id="c3" name="segment">
<input type="radio" id="c4" name="segment">
<input type="radio" id="c5" name="segment">
<input type="radio" id="c6" name="segment">
<input type="radio" id="c7" name="segment">
<input type="radio" id="c8" name="segment">
<input type="checkbox" id="toggle" checked="checked">
<div class="holder">
<div class="segment">
<label for="c1"><span class="fab fa-bitcoin" data-label="Test 1"></span></label>
<label for="c2"><span class="fab fa-bluetooth" data-label="Test 2"></span></label>
<label for="c3"><span class="fab fa-angellist" data-label="Test 3"></span></label>
<label for="c4"><span class="fab fa-apple-pay" data-label="Test 4"></span></label>
<label for="c5"><span class="fab fa-bimobject" data-label="Test 5"></span></label>
<label for="c6"><span class="fab fa-app-store" data-label="Test 6"></span></label>
<label for="c7"><span class="fab fa-bandcamp" data-label="Test 7"></span></label>
<label for="c8"><span class="fab fa-affiliatetheme" data-label="Test 8"></span></label>
</div>
<div class="curve-lower">
<div class="curve"></div>
</div>
<div class="curve-upper"></div>
<div class="center">
<div class="css-eye">
<div class="css-pupil" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

you can use flexbox for this. Read the CSS added to the end of css part
.css-menu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
margin: 10px auto 0;
width: 100%;
max-width: 568px;
height: 0;
}
.css-menu > div {
position: relative;
margin-bottom: 250px;
padding-bottom: 100%;
max-width: 100%;
height: 0;
}
.css-menu * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.css-menu input {
position: absolute;
display: none;
}
.css-menu .segment {
position: absolute;
z-index: 100;
left: 50%;
top: 50%;
margin-left: -48%;
margin-top: -48%;
width: 96%;
height: 96%;
border-radius: 50%;
overflow: hidden;
transform: scale(0);
transition: 0.5s cubic-bezier(.58, 2.4, 0.5, 0.5);
transition: 0.5s ease;
}
.css-menu .curve-upper {
position: absolute;
left: 1%;
top: 1%;
width: 98%;
height: 98%;
background: #fff;
border-radius: 50%;
transform: scale(0);
transition: 0s;
}
.css-menu .curve-lower {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
transform: rotate(-130deg) scale(0);
transition: 0s;
}
.css-menu .curve {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 100%;
background: #000;
transform-origin: left top;
transform: rotate(0deg) skewY(45deg);
}
.css-menu .segment label {
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
background: #567a98;
border: 1px solid #fff;
cursor: pointer;
transform-origin: left top;
transition: 0.25s cubic-bezier(0, 0, 1, 1);
transition: 0.25s ease;
}
.css-menu .segment label span {
display: block;
position: absolute;
left: 0;
top: 0;
right: 35%;
bottom: 25%;
margin: auto;
width: 35px;
height: 100px;
font-size: 3rem;
font-weight: normal;
color: #fff;
}
.fab:after{
content: attr(data-label);
font-family: 'Nexa Light', sans-serif;
font-size: 14px;
font-weight: 700;
margin-top: 10px;
color: #fff;
display: block;
text-align: center;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.css-menu .segment label:nth-of-type(1) {
transform: rotate(-135deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(2) {
transform: rotate(-90deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(3) {
transform: rotate(-45deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(4) {
transform: rotate(-0deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(5) {
transform: rotate(45deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(6) {
transform: rotate(90deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(7) {
transform: rotate(135deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(8) {
transform: rotate(180deg) skewY(45deg);
}
.css-menu .segment label:nth-of-type(1) span {
transform: skewY(-45deg) rotate(135deg);
}
.css-menu .segment label:nth-of-type(2) span {
transform: skewY(-45deg) rotate(90deg);
}
.css-menu .segment label:nth-of-type(3) span {
transform: skewY(-45deg) rotate(45deg);
}
.css-menu .segment label:nth-of-type(4) span {
transform: skewY(-45deg) rotate(0deg);
}
.css-menu .segment label:nth-of-type(5) span {
transform: skewY(-45deg) rotate(-45deg);
}
.css-menu .segment label:nth-of-type(6) span {
transform: skewY(-45deg) rotate(-90deg);
}
.css-menu .segment label:nth-of-type(7) span {
transform: skewY(-45deg) rotate(-135deg);
}
.css-menu .segment label:nth-of-type(8) span {
transform: skewY(-45deg) rotate(-180deg);
}
.css-menu .center {
display: block;
position: absolute;
z-index: 200;
left: 50%;
top: 50%;
margin-left: -17.5%;
margin-top: -17.5%;
width: 35%;
height: 35%;
border-radius: 50%;
background: #000;
overflow: hidden;
box-shadow: 0 0 0 2px #fff;
}
.css-menu .holder .segment {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 0.5s ease;
transform: scale(1);
}
.css-menu .holder .center {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 0.5s ease;
transform: scale(1.2);
}
.css-menu .holder .curve-upper {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 1s ease;
transform: scale(1);
}
.css-menu .holder .curve-lower {
transition: 0.5s cubic-bezier(.58, 3, 0.5, 0.5);
transition: 1s ease;
transform: rotate(-135deg) scale(1);
}
.css-menu #c1:checked ~ .holder .segment label:nth-of-type(1),
.css-menu #c2:checked ~ .holder .segment label:nth-of-type(2),
.css-menu #c3:checked ~ .holder .segment label:nth-of-type(3),
.css-menu #c4:checked ~ .holder .segment label:nth-of-type(4),
.css-menu #c5:checked ~ .holder .segment label:nth-of-type(5),
.css-menu #c6:checked ~ .holder .segment label:nth-of-type(6),
.css-menu #c7:checked ~ .holder .segment label:nth-of-type(7),
.css-menu #c8:checked ~ .holder .segment label:nth-of-type(8) {
background: #45acea;
}
.css-menu #c1:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(-135deg)
}
.css-menu #c2:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(-90deg)
}
.css-menu #c3:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(-45deg)
}
.css-menu #c4:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(0deg)
}
.css-menu #c5:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(45deg)
}
.css-menu #c6:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(90deg)
}
.css-menu #c7:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(135deg)
}
.css-menu #c8:checked ~ #toggle:checked ~ .holder .curve-lower {
transform: rotate(180deg)
}
.css-eye {
display: block;
width: 100%;
height: 100%;
background-color: white;
border:0.25em solid black;
border-radius: 50%;
position: relative;
box-shadow: 0.03em 0.14em rgba(0,0,0,0.1);
animation: blink forwards infinite 10s ease-in-out;
z-index:205;
}
.css-pupil {
position: absolute;
margin-left: 25%;
margin-top: 25%;
width: 50%;
height: 50%;
font-size: 200px;
border-radius: 50%;
background-color: black;
border: 0.1em solid #00aeef;
box-shadow: 0 0 0 0.02em black;
box-sizing: border-box;
will-change: transform;
transition: transform 200ms 300ms ease-in-out;
}
#keyframes blink {
0%, 2%, 60%, 62%, 100% { transform: scaleX(1) scaleY(1); }
1%, 61% { transform: scaleX(1.3) scaleY(0.1); }
}
.css-menu .segment label > span {
display: flex;
flex-direction: column;
align-items: center;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="screen">
<div class="css-menu">
<div>
<input type="radio" id="c1" name="segment" checked>
<input type="radio" id="c2" name="segment">
<input type="radio" id="c3" name="segment">
<input type="radio" id="c4" name="segment">
<input type="radio" id="c5" name="segment">
<input type="radio" id="c6" name="segment">
<input type="radio" id="c7" name="segment">
<input type="radio" id="c8" name="segment">
<input type="checkbox" id="toggle" checked="checked">
<div class="holder">
<div class="segment">
<label for="c1"><span class="fab fa-bitcoin" data-label="Test 1"></span></label>
<label for="c2"><span class="fab fa-bluetooth" data-label="Test 2"></span></label>
<label for="c3"><span class="fab fa-angellist" data-label="Test 3"></span></label>
<label for="c4"><span class="fab fa-apple-pay" data-label="Test 4"></span></label>
<label for="c5"><span class="fab fa-bimobject" data-label="Test 5"></span></label>
<label for="c6"><span class="fab fa-app-store" data-label="Test 6"></span></label>
<label for="c7"><span class="fab fa-bandcamp" data-label="Test 7"></span></label>
<label for="c8"><span class="fab fa-affiliatetheme" data-label="Test 8"></span></label>
</div>
<div class="curve-lower">
<div class="curve"></div>
</div>
<div class="curve-upper"></div>
<div class="center">
<div class="css-eye">
<div class="css-pupil"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>