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

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

你可以使用： 位置：亲属; right：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%; } 

Answer 2

从h1标题中取出display:table-cell标题，并简单地将text-align:right应用于您的td元素。

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

试试这个

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

Answer 4

您可以通过默认内容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>