0

我在这个 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;
}

我怎么解决这个问题？

4

5 回答 5

3

这是因为在内容宽度超过 300 像素后，表格中的图像会将所有内容推到它们下方。要阻止它，您可以在您的 css.xml 中设置 img 。

img{
    display:block;
}

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

编辑：如果您希望您的文本位于中间，那么您也许应该采用纯 css 样式的方法，并且根本不使用 HTML 表格。

例如

<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.
    }
于 2013-09-19T13:25:00.087 回答
3

这是因为图像是垂直对齐的（valign="middle"）。Css 将其呈现为好像它应该位于行本身上，这意味着行高将被拉伸。删除它应该没问题

于 2013-09-19T13:25:20.260 回答
2

试试这个 img{ display:block;}

于 2013-09-20T05:54:31.033 回答
2

将图像显示设置为阻止。喜欢显示：块

img{显示：块；}

于 2013-09-19T13:27:18.533 回答
0

您的 HTML 标记和 CSS 代码中都有很多错误（始终验证您的 HTML + CSS 代码）。

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

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

这是工作示例：jsFiddle

PS：如果 TD 不够宽以至于文本换行到第二行，这将失败。在这种情况下，最好将图像定义为background-image并将 a 添加padding-left: 80px到td.

于 2013-09-19T14:00:16.207 回答