如何在中间列出文本？

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将line-height: 200px;添加到.items ul li 这使得li具有与其高度相同的 line-heigh 。

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

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

如果文字长度有时和/或动态不同，您应该在文字周围添加<span>并给它position: absolute;（别忘了给父母li， position: relative;）。然后，您可以使用top，left以及translateX和-Y属性将跨度定位在球的中心。 See for more information