如何对齐 value to center vertically

Question

我需要将td单元格值水平和垂直对齐到中心。有rowspan属性。现在的输出就像：

A  |  B  |  C  |  D 
1  |  2  |  3  |  4
1  |  2  |  3  |  
1  |  2  |  3  |

期望：

A  |  B  |  C  |  D
1  |  2  |  3  |  
1  |  2  |  3  |  4
1  |  2  |  3  |  
1  |  2  |  3  |

Answer 1

试试：

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

Answer 2

使用<td rowspan="4" align="center">4</td>的工作

table td {
  padding: 5px;
}

<table border="1">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td rowspan="4" align="center">4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>

  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>

</table>

Answer 3

试试这个：

<td rowspan="4" tyle="text-align:center;">4</td>

Answer 4

只需添加rowspan 4即可。

<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td rowspan="4">1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
</table>

Answer 5

<!DOCTYPE html>
<html>
<head>
<style>
#customers td, #customers th {
    border: 1px solid #ddd;
}
</style>
</head>
<body>

<table id="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td rowspan ="4">Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
  </tr>
 
</table>

</body>
</html>

默认情况下，文本居中对齐。请检查现有的css，因为它会覆盖align属性。

Answer 6

尝试：

<td align="center" valign="middle">

Answer 7

将通用类添加到您的CSS中。

 .mytable td[rowspan] {
    vertical-align: middle;
    text-align: center;
}

Answer 8

live fiddle

码

<table class="table table-bordered">
  <thead>
    <tr>
        <td rowspan="2" style="vertical-align: middle;">
            first
        </td>
        <td rowspan="2" style="vertical-align: middle;">
            Second
        </td>
        <td rowspan="2" style="vertical-align: middle;">
            Third
        </td>
        <td rowspan="1" colspan="2">
            Fourth
        </td>
    </tr>
    <tr>
        <td>
          fifth
        </td>
        <td>
          sixth
        </td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 9

使用align属性

<td align="center">Name</td>

如何对齐 value to center vertically

问题描述投票：9回答：8

8个回答

最新问题

如何对齐 value to center vertically

问题描述 投票：9回答：8

8个回答

最新问题

问题描述投票：9回答：8