Question

我正在使用CSS下面的框来显示一些内容。我无法将文本放在框的中央。 text-align:center似乎无效。还尝试了line-height: 30px;，但它增加了行之间的间隔。我需要将此放在中心位置。

我可以设置一些属性来使文本位于框的中央吗？

.sideBarList li {
  width: 100px;
  height: 60px;
  margin: 0;
  text-align: center;
  line-height: 30px;
  border-radius: 10px;
  background: pink;
  margin: 0 10px 100px 30px;
  display: inline-block;
  vertical-align: top;
  color: black;
  position: relative;
  text-align: center;
  font-family: Arial;
  font-size: 11px;
}

<ul class="sideBarList">
  <li class="li">CDE RTR</li>
  <li class="li">ABC</li>
  <li class="li"> TYTYT YTYYT IIIOO TYTYYTYY RTRTRTR</li>
</ul>

Answer 1

   .sideBarList li {
      width: 100px;
      height: fill;
	  margin: 0;
      text-align: center;
      line-height: 30px;
      border-radius: 10px;
      background: pink;
      margin: 0 10px 100px 30px;
      display: inline-block;
      vertical-align: baseline;
      color: black;
      position: relative;
      text-align: middle;
      font-family: Arial;
      font-size: 11px;
}

  <ul class="sideBarList">
            <li class="li">CDE RTR</li>  
            <li class="li">ABC</li> 
            <li class="li"> TYTYT YTYYT IIIOO TYTYYTYY RTRTRTR</li> 
   </ul>

您是说它总是在盒子里吗？因为居中已经没有了？如果您想让盒子合适，请使用height: fill，否则您可以进一步说明目标吗？

无法将文字垂直居中

1 个答案: