html - 无法在表格单元格中垂直居中文本

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

你可以使用: position:relative； 右:值(value)%； (或左:值(value)％)随心所欲..

check this

<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%; }