1

首先，我的 CSS 技能是……正在进行中的工作。但到目前为止，我已经成功地将一堆列表项排列在一个网格中。http://jsfiddle.net/ashanova/Y4SR3/2/

我现在想做的是将列表项居中。我试图替换float为，inline但它会导致每个项目的widthandheight崩溃。我还想在每个列表项中水平和垂直居中文本，理想情况下省略（不是单词）溢出文本。作为最后一个规范，如果可能的话，我只想将 CSS 修改为 theul及其子项。

4

4 回答 4

2

虽然当您处理多个父元素和子元素以及在 2 个轴上居中（/中间）时，语言有点不清楚，但我认为如果其他答案不是您想要的，您可能真的想要display: table-cell.

检查这个小提琴。

如果你给你的li元素display: table-cell,text-align: center和vertical-align: middle，我认为文本会适当地安排自己。不幸的是，table-cell 元素不接受边距，所以我添加了一个 10px 的边框。

为了完成溢出文本的截断和椭圆的插入，您需要使用某种 javascript。

更新

通过许多其他答案和评论了解了更多关于您所追求的内容后，我在这里提出了一个更好的解决方案：http: //jsfiddle.net/crowjonah/jx8sD/

您需要做的是<a class="list-item">在元素内插入标签li，并使用以下 CSS：

.tile li {
    background-color: white;
    display: block;
    float: left;
    margin: 10px;
    overflow: hidden;
}
.tile li a.list-item{
    display: table-cell;
    vertical-align: middle;
    height: 75px;
    text-align: center;
    width:75px;

}
于 2012-09-20T14:16:52.917 回答
0

Text-align: center将使您的列表项与中心对齐。Vertical-align: text-top将项目垂直对齐到中心。

于 2012-09-20T14:05:25.520 回答
0

vetical-align在这种情况下实际上不会完成这项工作。我希望它是那么简单。

这篇文章将使您对问题有一些了解并帮助您解决它：

了解垂直对齐，或“如何（不）垂直居中内容”

于 2012-09-20T14:12:23.077 回答
0

这将做你想要的。内联块项目的边框很痛苦，所以我使用边框使其看起来正确。

.tile li {
    background-color: white;
    display:inline-block;
    border: 10px solid red;
    width: 75px;
    height: 75px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    overflow: hidden;
}
于 2012-09-20T14:16:53.733 回答