我怎样才能把列表文本放在中间？

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

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

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

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

如果文本长度有时 and/or 动态不同，您应该在文本周围添加一个 <span> 并给它 position: absolute;（不要忘记给父级 li, position: relative;).然后您可以将跨度定位在球的中心，顶部、左侧以及 translateX 和 -Y 属性。 See for more information

Answer 2

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

我怎样才能把列表文本放在中间？

How can I take lists text in middle?

html

css

text

text-styling