0

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

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

我发现了一项建议，该建议说要使行高75px，并且一直有效，直到多行为止。

4

4 回答 4

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>

工作小提琴

于 2012-08-23T18:33:51.843 回答
0

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

http://jsfiddle.net/3zLcT/

如果你只能用css，恐怕你倒霉了。

于 2012-08-23T18:26:58.370 回答
0

添加display: table-cell可能会起作用，因为垂直对齐或多或少意味着表数据

于 2012-08-23T18:30:01.853 回答
0

你必须使用列表吗？你可以用 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>
于 2012-08-23T18:38:14.880 回答