Question

我在桌子的每个td都有两个div，我想在两个div中垂直居中文本。两个div似乎无法独立对齐 - 即当第二个div超过一行时，两个div的顶部排成一行。我希望数字和内容位于td的中间

HTML：

<table class="mytable">
<tr>
    <td>
        <div class="number">01</div>
        <div class="content"><span>Some extra extra extra long content</span></div>
    </td>
    <td>
        <div class="number"><span>02</span></div>
        <div class="content"><span>Content</span></div>
    </td>
    <td>
        <div class="number"><span>03</span></div>
        <div class="content"><span>Content</span></div>
    </td>
</tr>

CSS：

table.mytable td {
    background-color: #276;
    color: #000;
    padding: 0.5em;
    width: 10%;
    font-size: 1.5em;
    vertical-align: middle;
    height: 50px;
}
.content {
    margin-left: 40px;
    vertical-align: middle;
}
.number {
    float: left;
    vertical-align: middle;
}

jsFiddle Example

Answer 1

您可以将div设置为display: table-cell：http://codepen.io/pageaffairs/pen/BGKEz

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

table.mytable td {
    background-color: #276;
    color: #000;
    padding: 0.5em;
    width: 10%;
    font-size: 1.5em;
    vertical-align: middle;
    height: 50px;
}

td div {display: table-cell; vertical-align: middle;}

.number {width: 40px;}

</style>
</head>
<body>

<table class="mytable">
<tr>
    <td>
        <div class="number">01</div>
        <div class="content"><span>Some extra extra extra long content</span></div>
    </td>
    <td>
        <div class="number"><span>02</span></div>
        <div class="content"><span>Content</span></div>
    </td>
    <td>
        <div class="number"><span>03</span></div>
        <div class="content"><span>Content</span></div>
    </td>
</tr>
</table>

</body>
</html>

Answer 2

<强> Demo

CSS

table.mytable td {
    background-color: #276;
    color: #000;
    padding: 0.5em;
    width: 10%;
    font-size: 1.5em;
    vertical-align: middle;
    height: 50px;
}
.content span {
    margin-left: 40px; /* if you wish to keep the margin to the content as in code */
    display: block;
}

table div {
    display: table-cell;
    vertical-align: middle; /* this will make the divs behave as table cell and vertical allign will make it in vertical center */
}

Answer 3

Firs从您的班级float: left;中移除number媒体资源，然后在display: table-cell;上使用div媒体资源。查看 DEMO 。

table.mytable td {
  background-color: #276;
  color: #000;
  padding: 0.5em;
  width: 10%;
  font-size: 1.5em;
  vertical-align: middle;
}

.mytable div.number, .mytable div.content
{
 display: table-cell; 
 text-align:center; 
 vertical-align:middle;
}

.content {
  margin-left: 40px;
  vertical-align: middle;
}


/*.number {
  float: left;
  vertical-align: middle;
}*/

Answer 4

见myfiddle

.number {
  float: left;
  vertical-align: middle;
 }
td:first-child .number{
line-height:50px;
}

http://jsfiddle.net/kisspa/LMGwH/1/

Answer 5

为什么不使用不同的“td”而不是将两个“div”放入一个单元格？

 <td>
    <div class="number"><span>03</span></div>
 </td>
 <td>
    <div class="content"><span>Content</span></div>
</td>

垂直对齐表格中两个div的内容

5 个答案: