0

I'm formatting a page using some tables. I would like to vertically center a cell in the middle of the screen.

<table width="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" border="0" cellpadding="0" cellspacing="0" bgcolor="#dedede" style="-webkit-text-size-adjust:none; line-height: 66%;">
  <tbody>
   <tr>
    <td valign="middle"> <!-- The problem is valign work only with a height element for that cell -->
     <!-- This next table is the one I want to centre --><table width="600" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="center" style="background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMTYlIiB5Mj0iMCUiPg0KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMGY4ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNCUiIHN0b3AtY29sb3I9IiNmYWZkZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iMzQlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2YyZjhmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiNlZGY2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTBmMGZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjU2JSIgc3RvcC1jb2xvcj0iI2QzZWFmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNjOWU1ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNjUlIiBzdG9wLWNvbG9yPSIjYjdkY2ZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjY5JSIgc3RvcC1jb2xvcj0iI2FkZDdmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiNhM2QyZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iODclIiBzdG9wLWNvbG9yPSIjNmRiNGYyIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzMyOWNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMxOTkwZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwODNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogIDwvbGluZWFyR3JhZGllbnQ+DQogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+DQo8L3N2Zz4=);background: -moz-linear-gradient(23deg,  hsla(208,100%,96%,1) 0%, hsla(208,100%,98%,1) 4%, hsla(0,0%,100%,1) 7%, hsla(0,0%,100%,1) 34%, hsla(208,100%,98%,1) 40%, hsla(208,100%,96%,1) 44%, hsla(208,100%,94%,1) 50%, hsla(208,100%,91%,1) 56%, hsla(208,100%,89%,1) 60%, hsla(208,100%,86%,1) 65%, hsla(208,100%,84%,1) 69%, hsla(208,100%,82%,1) 72%, hsla(208,84%,69%,1) 87%, hsla(208,100%,60%,1) 96%, hsla(208,100%,55%,1) 98%, hsla(208,100%,50%,1) 100%);background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,hsla(208,100%,98%,1)), color-stop(4%,hsla(208,100%,98%,1)), color-stop(7%,hsla(0,0%,100%,1)), color-stop(34%,hsla(0,0%,100%,1)), color-stop(40%,hsla(208,100%,98%,1)), color-stop(44%,hsla(208,100%,96%,1)), color-stop(50%,hsla(208,100%,94%,1)), color-stop(56%,hsla(208,100%,91%,1)), color-stop(60%,hsla(208,100%,89%,1)), color-stop(65%,hsla(208,100%,86%,1)), color-stop(69%,hsla(208,100%,84%,1)), color-stop(72%,hsla(208,100%,82%,1)), color-stop(87%,hsla(208,84%,69%,1)), color-stop(96%,hsla(208,100%,60%,1)), color-stop(98%,hsla(208,100%,55%,1)), color-stop(100%,hsla(208,100%,50%,1)));background: -webkit-linear-gradient(67deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);background: -o-linear-gradient(67deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);background: -ms-linear-gradient(23deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);background: linear-gradient(23deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbff', endColorstr='#0083ff',GradientType=1 );-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: #222 -25px 25px 70px;-moz-box-shadow: #222 -25px 25px 70px;box-shadow: #222 -25px 25px 70px;">
      <thead>
       <tr>
       <td  height="140px"></td>
       </tr>
      </thead>
      <tbody>
       <tr>
        <td width="35">
       </td>
        <td width="530">
         <font color="#5e5e5e" face="Arial, Helvetica, sans-serif" size="2" style="font-size: 12px;">
         <strong>Madame Monsieur,</strong>
         <br>
         <br>
         <br> 
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
         <br>
        </font>
       </td>
        <td width="35"></td>
       </tr>
        </tr>
         <tr>
          <td width="35"></td>
           <td height="33" width="530">
            <!--img src="http://lapostegp-t.neolane.net/res/img/0ACC00B0C045ED53D213B37D5CBB02E4.jpg" alt="" border="0" width="530" height="33" style="display: block;"-->
           </td>
          <td width="35"></td>
         </tr>
        </tr>
      </tbody>
     </table>
    </td>
   </td>
  </tbody>
</table>

It work if I use JavaScript
However JavaScript elements are filtered in email clients, and the support for viewports units is far too low.

current behaviour:vertically unaligned Wanted behaviour:vertically aligned

So is there a CSS way to fix this (I don't care if it require a browser)?

user2284570
  • 2,891
  • 3
  • 26
  • 74

4 Answers4

0

I can't see any real difference between the two examples you gave. In both, the text is already centered vertically in the table.

If we vertically stretch the table cell, you can see the text is aligned vertically to the middle:

Text is already centered vertically in its cell

The only reason it doesn't look that way is because there is a giant table heading above it. See here:

Massive heading pushing everything down

This table head simply has a hardcoded height in the code:

<thead>
    <tr>
        <td  height="140px"></td>
    </tr>
</thead>

If you shrink that down to about 10px or 20px, the text becomes much more centered. Is this what you're asking about?

If you want the table cell to float centered above the rest of the table, you can do that with CSS, but it is probably not a great idea. I hope I understood what you wanted and that this was helpful.

Calvin Scherle
  • 312
  • 1
  • 9
  • No I want to center the cell itself not it's content. take an html look [here](https://drive.google.com/uc?export=download&id=0ByLehpxea_PHdzNTTDUxNWJFNTA) – user2284570 Oct 20 '14 at 13:36
0

The idea is something like this:

<table cellspacing="0" cellpadding="0" border="1">
<tr>
    <td width="100">padding-left: 100</td>
    <td>
        <table cellspacing="0" cellpadding="0" border="1" width="100%" height="100%">
            <tr>
                <td height="100">padding-top: 100</td>
            </tr>
            <tr>
                <td><h1>Centered content goes here...</h1></td>
            </tr>
            <tr>
                <td height="100">padding-bottom: 100</td>
            </tr>
        </table>
    </td>
    <td width="100">padding-right: 100</td>
</tr>

Below is my 1st attempt to answer this question:
Result with your code: jsfiddle
Solution: jsfiddle

The table you are using has 3 rows. The first one has height=140px and the third one has height=33px. The middle row containes your text. So, I removed these height attributes (but retained the rows if you want to use them) and then defined the table height to 270px as it was at your original code.

If you are trying to create a newsletter the best practice is to align your text using tables and width , height attributes to generate padding and avoid using too much CSS.

tgogos
  • 23,218
  • 20
  • 96
  • 128
  • I want to center the cell, not it's content. – user2284570 Oct 20 '14 at 11:36
  • Ok, you'll have to get used to this logic of wrapping content with tables. Just use a table (like you actually do) with three rows. Inside the middle row, create a **new** table with the content you like. Then, add same height to the first and last row. – tgogos Oct 20 '14 at 11:45
  • That's the target of the question *([how to do it](https://drive.google.com/uc?export=download&id=0ByLehpxea_PHdzNTTDUxNWJFNTA))*. – user2284570 Oct 20 '14 at 12:08
  • this assume I know the height of cell which is not. – user2284570 Oct 20 '14 at 14:17
  • You don't have to know the height of the centered cell because this cell is pushing all the other elements outside. You only have to define the 4 paddings (top, bottom, left, right). See your example with padding 50px [demo](http://jsfiddle.net/e7yhxcna/3/) – tgogos Oct 20 '14 at 14:21
  • I had forgotten a `width="100"` to the outer table so the width wasn't defined by the centered content. See again this [jsfiddle](http://jsfiddle.net/e7yhxcna/4/) and try to add content. You will realize that it pushes out all the other elements. It is where you should put your table with your desired width/height. – tgogos Oct 20 '14 at 14:30
  • Ok, but it was already what I'm doing for the contents inside the second table. Sorry, I realize I was unclear about what I needed. ***Question updated***. – user2284570 Oct 20 '14 at 15:11
  • [Best way to center a
    on a page vertically and horizontally?](http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally/18618259#18618259)
     – tgogos Oct 20 '14 at 15:38
  • No, because you are using `height: 353px`. Which is globally the same as using ``. I don't want to size up the height of my letter in pixel each time I send an e-mail. That's why I wrote "*How to vertically center a cell of **dynamic** height in CSS?*". – user2284570 Oct 20 '14 at 17:10
0
<!DOCTYPE HTML>
<html>
    <head>
        <title>stage en informatique d'exploitation</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="https://www.internet.pro.eboutique.net2-courrier.extra.laposte.fr/_ui/eboutique/css/laposte.css">
        <style type="text/css">

            html, body { 
                height: 100%; 
            }

            .linkBlue { 
                 display:inline-block; 
                 height:49px; 
                 padding:0 0 0 23px; 
                 font-size:1.6em; 
                 color:#fff; 
                 font-weight:700; 
                 background:url(../images/btn/btn_sprite.png) no-repeat 0 -396px; 
                 text-decoration: none;
            }

            a:visited {
                color:#5e5e5e;
                text-decoration:none; 
                padding-bottom:0px;
                border-bottom:solid 1px #5e5e5e;
            }

            a { 
                color:#5e5e5e;
                text-decoration:none;
            }

            a:link { 
                color:#5e5e5e;
                text-decoration:none;
            }

            a:hover{ 
                color:#5e5e5e; 
                font-weight:bold; 
            }

            a:focus{ 
                color:#5e5e5e; 
                font-weight:bold; 
            }

            a:-moz-selection{ 
                color:#5e5e5e; 
                font-weight:bold; 
            }

            a:selection{ 
                color:#5e5e5e; 
                font-weight:bold; 
            }

            a-footer{ 
                color:#ffffff; 
                text-decoration:none; 
                padding-bottom:0px; 
                border-bottom:solid 1px #804e76; 
            }

            a-footer:hover{ 
                color:#ffffff; 
                font-weight:bold; 
            }

            .premier-tableau {
                background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMTYlIiB5Mj0iMCUiPg0KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMGY4ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNCUiIHN0b3AtY29sb3I9IiNmYWZkZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iMzQlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2YyZjhmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiNlZGY2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTBmMGZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjU2JSIgc3RvcC1jb2xvcj0iI2QzZWFmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNjOWU1ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNjUlIiBzdG9wLWNvbG9yPSIjYjdkY2ZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjY5JSIgc3RvcC1jb2xvcj0iI2FkZDdmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiNhM2QyZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iODclIiBzdG9wLWNvbG9yPSIjNmRiNGYyIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzMyOWNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMxOTkwZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwODNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogIDwvbGluZWFyR3JhZGllbnQ+DQogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+DQo8L3N2Zz4=); /* image Svg pour IE9 */
                background: -moz-linear-gradient(23deg,  hsla(208,100%,96%,1) 0%, hsla(208,100%,98%,1) 4%, hsla(0,0%,100%,1) 7%, hsla(0,0%,100%,1) 34%, hsla(208,100%,98%,1) 40%, hsla(208,100%,96%,1) 44%, hsla(208,100%,94%,1) 50%, hsla(208,100%,91%,1) 56%, hsla(208,100%,89%,1) 60%, hsla(208,100%,86%,1) 65%, hsla(208,100%,84%,1) 69%, hsla(208,100%,82%,1) 72%, hsla(208,84%,69%,1) 87%, hsla(208,100%,60%,1) 96%, hsla(208,100%,55%,1) 98%, hsla(208,100%,50%,1) 100%); /* FF3.6+ */
                background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,hsla(208,100%,98%,1)), color-stop(4%,hsla(208,100%,98%,1)), color-stop(7%,hsla(0,0%,100%,1)), color-stop(34%,hsla(0,0%,100%,1)), color-stop(40%,hsla(208,100%,98%,1)), color-stop(44%,hsla(208,100%,96%,1)), color-stop(50%,hsla(208,100%,94%,1)), color-stop(56%,hsla(208,100%,91%,1)), color-stop(60%,hsla(208,100%,89%,1)), color-stop(65%,hsla(208,100%,86%,1)), color-stop(69%,hsla(208,100%,84%,1)), color-stop(72%,hsla(208,100%,82%,1)), color-stop(87%,hsla(208,84%,69%,1)), color-stop(96%,hsla(208,100%,60%,1)), color-stop(98%,hsla(208,100%,55%,1)), color-stop(100%,hsla(208,100%,50%,1))); /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(67deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%); /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(67deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%); /* Opera 11.10 à 12.1 */
                background: -ms-linear-gradient(23deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%); /* IE10+ */
                background: linear-gradient(23deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%); /* W3C avec Opera de 12 à 12.50 */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbff', endColorstr='#0083ff',GradientType=1 ); /* IE6-8: damnder un gradient horizontale en tant qu'alternative bgcolor="#dedede" */
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
                -webkit-box-shadow: #222 -25px 25px 70px;
                -moz-box-shadow: #222 -25px 25px 70px;
                box-shadow: #222 -25px 25px 70px;
            }
        </style>
</head>
<body bgcolor="#dedede" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="-webkit-text-size-adjust:none; line-height: 66%;">

<!-- REMOVE HEIGHT="100%" FROM TABLE BELOW IF YOU WANT THE BOX TO BE AT THE TOP OF THE PAGE. -->    
<table height="100%" border="0" style="margin: 0 auto;">
    <tr>
        <td align="center">

            <table width="600" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" border="0" cellpadding="0" cellspacing="0" bgcolor="#dedede" style="-webkit-text-size-adjust:none; line-height: 66%;">
                <tr>
                    <td>
                        <!-- The problem is valign work only with a height element for that cell -->
                        <!-- This is this next table I need to centre -->

                        <table width="600" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="center" class="premier-tableau">
                            <tr>
                                <!-- PADDING: top, right, bottom, left -->
                                <td valign="middle" style="padding: 50px 30px 50px 30px;">

                                <font color="#5e5e5e" face="Arial, Helvetica, sans-serif" size="2" style="font-size: 12px;">
                                <strong>Madame Monsieur,</strong>
                                <br /><br /><br />  
                                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                                <br>
                                </font>
                                <!--img src="http://lapostegp-t.neolane.net/res/img/0ACC00B0C045ED53D213B37D5CBB02E4.jpg" alt="" border="0" width="530" height="33" style="display: block;"-->

                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>
piNo
  • 13
  • 2
  • Humm. Do you know the difference between horizontal an vertical? – user2284570 Oct 20 '14 at 16:52
  • Well ofc i do. Remove at the top of your code. – piNo Oct 20 '14 at 17:32
  • piNo : No ` `is necessary, because I use the file locally. But did you really tried it before saving?! **Just read the question again!** Also, sorry about the code, but someone replaced my code snippet with wrong code. – user2284570 Oct 20 '14 at 19:01
  • I fixed your code and added paddings instead of td width. The code above should works as you want it to. I also added some info for the table position and padding to the content. – piNo Oct 20 '14 at 20:31
  • But Why do you want to centre the text of a formal letter? – user2284570 Oct 21 '14 at 09:19
  • Well i am doing what you are asking for. You might want to explain better what you are looking for. Change the style="padding: 50px 30px 50px 30px" to position the content as you want it. Try style="padding: 100px 30px 50px 30px" or play around with it to get the result you're looking for. – piNo Oct 21 '14 at 11:36
  • No, I want to vertically centre the table as described by the snapshots on my question *(You should zoom to get more details)*. I don't want to center any text. Padding doesn't work for XP users using IE or outlook, that's why I'm using cells instead. Anyway, I finally indirectly found why it didn't worked thanks to your answer. – user2284570 Oct 21 '14 at 15:12
0

Try this css or you can add it to inline- http://jsfiddle.net/e7yhxcna/28/ 

table { 
    width:400px;
    height: 300px;
    position:fixed;
    margin-left:-200px; /* half of width */
    margin-top:-150px;   /*half of height */
    top:50%;
    left:50%;
}

with inline css - http://jsfiddle.net/e7yhxcna/30/

<table width="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" border="0" cellpadding="0" cellspacing="0" bgcolor="#dedede" style="-webkit-text-size-adjust:none; line-height: 66%;">
     <tbody>
         <tr>
             <td valign="middle"> <!-- The problem is valign work only with a height element for that cell -->
                 <!-- This next table is the one I want to centre --><table width="400" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="center" style="width:400px; height: 300px; position:fixed; margin-left:-200px; margin-top:-150px; top:50%; left:50%; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pg0KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPg0KICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQtdWNnZy1nZW5lcmF0ZWQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIxMDAlIiB4Mj0iMTYlIiB5Mj0iMCUiPg0KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmMGY4ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNCUiIHN0b3AtY29sb3I9IiNmYWZkZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iMzQlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2YyZjhmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI0NCUiIHN0b3AtY29sb3I9IiNlZGY2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZTBmMGZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjU2JSIgc3RvcC1jb2xvcj0iI2QzZWFmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiNjOWU1ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iNjUlIiBzdG9wLWNvbG9yPSIjYjdkY2ZmIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9IjY5JSIgc3RvcC1jb2xvcj0iI2FkZDdmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI3MiUiIHN0b3AtY29sb3I9IiNhM2QyZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iODclIiBzdG9wLWNvbG9yPSIjNmRiNGYyIiBzdG9wLW9wYWNpdHk9IjEiLz4NCiAgICA8c3RvcCBvZmZzZXQ9Ijk2JSIgc3RvcC1jb2xvcj0iIzMyOWNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogICAgPHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMxOTkwZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg0KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwODNmZiIgc3RvcC1vcGFjaXR5PSIxIi8+DQogIDwvbGluZWFyR3JhZGllbnQ+DQogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+DQo8L3N2Zz4=);background: -moz-linear-gradient(23deg,  hsla(208,100%,96%,1) 0%, hsla(208,100%,98%,1) 4%, hsla(0,0%,100%,1) 7%, hsla(0,0%,100%,1) 34%, hsla(208,100%,98%,1) 40%, hsla(208,100%,96%,1) 44%, hsla(208,100%,94%,1) 50%, hsla(208,100%,91%,1) 56%, hsla(208,100%,89%,1) 60%, hsla(208,100%,86%,1) 65%, hsla(208,100%,84%,1) 69%, hsla(208,100%,82%,1) 72%, hsla(208,84%,69%,1) 87%, hsla(208,100%,60%,1) 96%, hsla(208,100%,55%,1) 98%, hsla(208,100%,50%,1) 100%);background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,hsla(208,100%,98%,1)), color-stop(4%,hsla(208,100%,98%,1)), color-stop(7%,hsla(0,0%,100%,1)), color-stop(34%,hsla(0,0%,100%,1)), color-stop(40%,hsla(208,100%,98%,1)), color-stop(44%,hsla(208,100%,96%,1)), color-stop(50%,hsla(208,100%,94%,1)), color-stop(56%,hsla(208,100%,91%,1)), color-stop(60%,hsla(208,100%,89%,1)), color-stop(65%,hsla(208,100%,86%,1)), color-stop(69%,hsla(208,100%,84%,1)), color-stop(72%,hsla(208,100%,82%,1)), color-stop(87%,hsla(208,84%,69%,1)), color-stop(96%,hsla(208,100%,60%,1)), color-stop(98%,hsla(208,100%,55%,1)), color-stop(100%,hsla(208,100%,50%,1)));background: -webkit-linear-gradient(67deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);background: -o-linear-gradient(67deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);background: -ms-linear-gradient(23deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);background: linear-gradient(23deg,  hsla(208,100%,96%,1) 0%,hsla(208,100%,98%,1) 4%,hsla(0,0%,100%,1) 7%,hsla(0,0%,100%,1) 34%,hsla(208,100%,98%,1) 40%,hsla(208,100%,96%,1) 44%,hsla(208,100%,94%,1) 50%,hsla(208,100%,91%,1) 56%,hsla(208,100%,89%,1) 60%,hsla(208,100%,86%,1) 65%,hsla(208,100%,84%,1) 69%,hsla(208,100%,82%,1) 72%,hsla(208,84%,69%,1) 87%,hsla(208,100%,60%,1) 96%,hsla(208,100%,55%,1) 98%,hsla(208,100%,50%,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbff', endColorstr='#0083ff',GradientType=1 );-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: #222 -25px 25px 70px;-moz-box-shadow: #222 -25px 25px 70px;box-shadow: #222 -25px 25px 70px;">
                     <thead>
                         <tr>
                            <td  height="140px"></td>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td width="35">
                         </td>
                             <td width="530">
                                 <font color="#5e5e5e" face="Arial, Helvetica, sans-serif" size="2" style="font-size: 12px;">
                                    <strong>Madame Monsieur,</strong>
                                    <br>
                                    <br>
                                    <br>    
                                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                                    <br>
                                </font>
                         </td>
                             <td width="35"></td>
                         </tr>
                             </tr>
                                 <tr>
                                     <td width="35"></td>
                                         <td height="33" width="530">
                                             <!--img src="http://lapostegp-t.neolane.net/res/img/0ACC00B0C045ED53D213B37D5CBB02E4.jpg" alt="" border="0" width="530" height="33" style="display: block;"-->
                                         </td>
                                     <td width="35"></td>
                                 </tr>
                             </tr>
                     </tbody>
                 </table>
             </td>
         </td>
     </tbody>
</table>
brightboy2004
  • 258
  • 1
  • 3
  • `margin-left:-200px; /* half of width */ margin-top:-150px; /*half of height */`is globally the same as using ``. I don't want to size up the height of my letter in pixel each time I send an e-mail. That's why I wrote "*How to vertically center a cell of **dynamic** height in CSS?*". Meaning I can't use any fixed pixel numbers. – user2284570 Oct 21 '14 at 09:25