时间戳

首页 > 解决方案 > 如何将字体图标和文本对齐成一个圆圈？

html - 如何将字体图标和文本对齐成一个圆圈？

问题描述

我工作了几个小时来对齐下面CSS中的字体图标和文本。这听起来真的不是一件难事。对齐是基于一个“圆”的，在玩了一段时间 CSS 之后，我最终很困惑.. 所以我希望其他人经历过这个并且知道如何正确对齐它们，在中间..

.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>

标签： htmlcss

解决方案

您可以为此使用 flexbox。阅读添加到 css 部分末尾的 CSS

.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>

推荐阅读