Question

我正在一个无序列表中构建一堆列表项。该列表具有固定大小250px X 75px;这些列表项是动态生成的，所以我不知道将显示什么文本，所以我的li看起来像这样。

#pages-content li{
  float: left;
  width: 250px;
  height: 75px;
  margin: 15px;
  vertical-align: middle;
  text-align: center;
}

我找到了一个建议，即说明行高75px，直到有多行为止。

Answer 1

CSS：

#pages-content ul li{
  width: 250px;
  height: 75px;
  text-align: center;
}

HTML：

<div id="pages-content">
    <ul>
        <li>Matter here</li>
    </ul>
</div>

Working fiddle

Answer 2

对于纯HTML / CSS解决方案，请尝试在表格单元格中使用表格和vertical-align: middle。

http://jsfiddle.net/3zLcT/

如果你只能使用CSS，我担心你运气不好。

Answer 3

添加display: table-cell可能会有效，因为对于表格数据，或多或少是垂直对齐

Answer 4

你必须使用清单吗？你能用div来代替吗？

<style>
.div { 
  width: 250px; 
  height: 75px; 
  position: relative;
}

.container { 
  position: absolute; 
  width: 250px; 
  height: 75px; 
  display: table; 
}

.container p {
  display: table-cell; 
  vertical-align: middle; 
  text-align: center; 
}
</style>
<div class="div">
      <div class="container">
          <p>This text should look centered even if it's long.</p>
      </div>
</div>
<div class="div">
      <div class="container">
          <p>This text should look centered even if it's long.</p>
      </div>
</div>
<div class="div">
      <div class="container">
          <p>This text should look centered even if it's long.</p>
      </div>
</div>

文本未知长度的LI中心文本

4 个答案: