How can I take lists text in middle?

Question

==Here I need to take my text at the middle of the balls.

this is my output, but i need these text in middle

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

Can you please explain this question? What do you mean by _Here I need to take my text at the middle of the balls._? Everything is already in middle. — , Mar 29 '18 at 07:42
"Here I need to take my text at the middle of the balls". Ouch.. — wickywills, Mar 29 '18 at 07:43

score 2 · Accepted Answer · answered Mar 29 '18 at 07:46

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

G43beli · Answer 2 · 2018-03-29T07:54:10.150

0

Add line-height: 200px; to your .items ul li This gives the li the same line-height as its height.

Or if you know that the "balls" contain always the same texts you can fix it with this (add it to .items ul li):

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

If the text length is different sometimes and/or dynamic, you should add a <span> arround your text and give it position: absolute; (dont forget to give the parent, the li, position: relative;). Then you can position the span in the center of the balls with top, left, and the translateX and -Y property. See for more information

edited Mar 29 '18 at 07:54

answered Mar 29 '18 at 07:43

G43beli

3,835
4
21
28

@TAHMIDHASANNAFIS no problem. mark the answer which helped you the most as solution, so other people see the solution for the problem – G43beli Apr 27 '18 at 09:35

How can I take lists text in middle?

2 Answers2