Can't vertically center text in a table cell

Question

I'm creating a website for a school project using HTML and CSS. In the header there is a table and I need a text (which is inside a cell) to be aligned on the vertical center and on the horizontal right.

This is the HTML code

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

and this is the CSS code

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

but it doesn't work as I want, so I changed the CSS code into

h1
{
    font-family:Arial;
    font-size:50px;
    color:#009ED9;

    display:table-cell;
    vertical-align:middle;
    text-align:right;
}

and the text is vertically centered, but not on the right (it is on the left). I've read that I can use line-height or a padding on the top, but in my opinion it is more clean and elegant to use vertical-align (tell me if I am wrong).

I tried also other code from suggestions on the web but I don't write it otherwise the question will be too long.

Answer 1

you can use : position : relative; right : value%; (or left:value%) as you like ..

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

Take out display:table-cell from your h1 headings and simply apply a text-align:right to your td elements.

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>