html - 如何在中间获取列表文本？

Question

==这里我需要把我的文字放在球的中间。

这是我的输出，但我需要这些文本在中间

.items {
	padding-top: 50px;
	
}
.items ul {
	list-style: none;
}
.items ul li {
	width: 200px;
	height: 200px;
	background: white;
	border-radius: 200px;
	float: left;
	margin-left: 150px;
	margin-bottom: 50px;
	text-align: center;
}

<div class="items">
  <ul class="items">
    <li>Printed-T-Shirts</li>
    <li>Get Your Print</li>
    <li>Choose A Design</li>
    <li>Full-T-Shirts</li>
    <li>1-Color-Designs</li>
    <li>MultiColor Designs</li>
  </ul>
</div>

Answer 1

.items {
	padding-top: 50px;
	
}
.items ul {
	list-style: none;
}
.items ul li {
	width: 200px;
	height: 200px;
	background: #ccc;
	border-radius: 200px;
	display: inline-block;
	margin-left: 150px;
	margin-bottom: 50px;
  position: relative;
}

.items ul li p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin: 0;
  width: 100%;
  text-align: center;
}

<div class="items">
			<ul class="items">
				<li><p>Printed-T-Shirts</p></li>
				<li><p>Get Your Print</p></li>
				<li><p>Choose A Design</p></li>
				<li><p>Full-T-Shirts</p></li>
				<li><p>1-Color-Designs</p></li>
				<li><p>MultiColor Designs</p></li>
			</ul>
		</div>

Answer 2

添加line-height: 200px;到您的.items ul li 这使 li 的行高t 与其高度相同。

或者，如果您知道“球”始终包含相同的文本，您可以使用它来修复它（将其添加到.items ul li）：

padding: 89px 0;
box-sizing: border-box;

如果文本长度有时和/或动态不同，您应该<span>在文本中添加一个 arround 并给出它position: absolute;（不要忘记给父级，li, position: relative;）。然后，您可以使用 top、left 和 translateX 和 -Y 属性将跨度定位在球的中心。 查看更多信息