在html表中定位单元格值



我有一个表,其中td标记中的哪些值向上投影得更多。我希望里面的价值观是集中的。我在下面的代码中尝试过,但没有成功。我们有没有办法把价值集中在一个既不太高也不太低的地方?

<td style="text-align:center;">

您可以尝试将其添加到样式中,因为文本对齐添加了水平对齐

vertical-align: middle;

你可以在这里阅读更多https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

您可以使用行高

例如,如果你的<td>高度是48px,那么给<td>这个css:

line-height : 48px; 

我们不知道你的css怎么样,但有了这个例子,它似乎工作得很好。

DEMO(您可以看到"加拿大"的位置正确(

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: center;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars <br> <br> <br> <br> Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri Yoshi Tannamuri Yoshi Tannamuri Yoshi Tannamuri Yoshi Tannamuri Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>

问题是"文本对齐";是水平对齐。你需要的是";垂直对齐";所有物

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

最新更新