不能在表格单元格中垂直居中文本

Question

我正在使用HTML和CSS为学校项目创建一个网站。在标题中有一个表格，我需要在垂直中心和水平右侧对齐一个文本(在单元格内(。

这是 HTML 代码

<table id="intestazione">
........
    <tr>
        <td class="centerV"><h1>Text</h1></td>
        <td><img src="Logo.jpg"></td>
    </tr>
</table>

这是CSS代码

h1
{
    font-family:Arial;
    font-size:50px;
    color:#009ED9;
    text-align:right;
}
.centerV
{
    display:table-cell;
    vertical-align:middle;
}

但它不能按我想要的方式工作，所以我将 CSS 代码更改为

h1
{
    font-family:Arial;
    font-size:50px;
    color:#009ED9;
    display:table-cell;
    vertical-align:middle;
    text-align:right;
}

并且文本垂直居中，但不在右侧(它在左侧(。我读过我可以在顶部使用line-height或padding，但在我看来，使用vertical-align更干净优雅(如果我错了，请告诉我(。

我还尝试了网络上建议中的其他代码，但我不会写它，否则问题会太长。

Answer 1

您可以使用

： 位置 ： 相对; 右 ： 值%; (或左：值%(如你所愿..

检查这个

<table id="intestazione" border="1">
<tr>
    <td class="centerV"><h1>Text</h1></td>
    <td><img src="http://www.sec4ever.com/home/images/misc/noavatar.gif"></td>

</tr>

h1{
font-family:Arial;
font-size:50px;
color:#009ED9;
display:table-cell;
padding:100px;
vertical-align:middle;
position:relative;
right:30%; }

Answer 2

从h1标题中取出display:table-cell，只需对 td 元素应用text-align:right即可。

h1 {
  font-family: Arial;
  font-size: 50px;
  color: #009ED9;
  text-align: right;
}
.centerV {
  vertical-align: middle;
}
tr {
  border: solid red;
}
td {
  border: solid green;
  width: 100%;
}
h1 {
  font-family: Arial;
  font-size: 50px;
  color: #009ED9;
  vertical-align: middle;
  text-align: right;
}
h1 {
  border: solid red;
}
table {
  text-align: right;
}

<table id="intestazione">
  ........
  <tr>
    <td class="centerV">
      <h1>Text</h1>
    </td>
    <td><img src="Logo.jpg"></td>
  </tr>
</table>

Answer 3

您可以在

td中使用align="right" 默认情况下，内容在td中垂直对齐。

<table id="intestazione" width="100%" bgcolor="green">
    <tr>
        <td align="right" valign="middle" ><h1>Text</h1></td>
        <td><img src="Logo.jpg"></td>
    </tr>
</table>

Answer 4

试试这个

h1 {
    font-family:Arial;
    font-size:50px;
    color:#085ED9;
    display:table-cell;
    vertical-align:middle;
    float: right;
}