Question

我在this jsfiddle上有这个代码，我的文本对齐有问题：你可以看到这些行之间有很多空格！

为什么？

table {
    width: 700px;
    margin-left: 130px;
    margin-right: 130px;
}
tr {
    width: 500px;
    float: center;
}
td {
    display: table-cell;
    width: 300px;
    height: 100%;
    padding: auto 30px auto 30px;
    font-family: verdana, arial, sans-serif;
    font-size:13px;
    color:red;
    line-height: -3;
    text-align: right;
}

我该如何解决这个问题？

Answer 1

这是因为在内容超过300px宽度后，表格中的图像会将所有内容推到它们下方。要停止它，你可以在你的CSS中设置img。

img{
    display:block;
}

http://jsfiddle.net/9EL5f/1/

编辑：如果您希望文本位于中间，那么您应该选择纯css风格的方法，而不要使用HTML表格。

e.g

<div id="col1"><img ... /><span>Text goes here</span></div>

你会用你想要的许多行图像和文本填充这个div，然后在你的CSS中设置它们的样式。然后，您将重复第二列。单独列的css看起来像是：

#col1{
    width:500px;
    float:left;
    margin-right:10px; //add space between this column and the next one.
    }

Answer 2

那是因为图像是垂直对齐的（valign =“middle”）。 Css将它呈现为它应该位于线本身上，这意味着线高将被拉伸。只需删除它就应该没问题

Answer 3

将图像显示设置为阻止。像display：block

img {display：block;}

Answer 4

尝试img {display：block;}

Answer 5

HTML标记和CSS代码中都存在很多错误（总是validate HTML + CSS代码）。

我已经纠正了jsFiddle中的所有错误。

问题的“关键”是您必须在vertical-align: middle上设置img

以下是工作示例：jsFiddle

PS：如果TD的宽度不足以使文本换行到第二行，则会失败。在这种情况下，最好将图像定义为background-image，只需将padding-left: 80px添加到td。

表格中的行之间的空间太大

5 个答案: