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

从display:table-cell标题中取出h1，然后只需将text-align:right应用于您的td元素。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你可以使用：位置：相对; 对：价值％; （或左：值％）如你所愿......

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 3

您可以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>

Answer 4

试试这个

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

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

4 个答案: