无法在表格单元格中垂直居中文本
无法在表格单元格中垂直居中文本
提问于 2017-04-01 07:33:42
我正在为一个使用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更干净和优雅(如果我错了，请告诉我)。
我也尝试了其他代码，从建议在网上，但我不写它，否则问题将是太长。
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-04-01 07:59:52
您可以使用:位置:相对；右:值%；(或左:值%)。
<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%; }Stack Overflow用户
发布于 2017-04-01 07:50:09
从display:table-cell标题中取出h1，并将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>
Stack Overflow用户
发布于 2017-04-01 08:14:13
默认情况下，可以在align="right"中使用td，内容在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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43158711
复制相关文章
相似问题
表格中的文本垂直居中
如何在表格单元格中对文本进行垂直居中
在表格中垂直居中显示文本和图像
在outlook的表格单元格中居中垂直对齐href文本
无法垂直居中表格单元格中的浮动元素
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
