Valign Not Working on a Td

valign not working on a td?

Firstly,

You shouldn't really be using tables for layout (even for forms) you should use divs and CSS:
how to make full height cell in full height table in Internet Explorer

Secondly,

valign was deprecated, we now use the css property vertical-align see why not to use valign:
http://phrogz.net/css/vertical-align/index.html

HMTL:

<div class="className">Blah</div>

CSS:

.className {
   vertical-align: middle;
}

vertical align and valign not working on table!

valign should work no matter what if all settings that we see here are those that are actually used.

Global CSS settings

But I suspect a different gunman here. Did you check your global CSS file what it defines for TH elements? Maybe that's what's giving you headaches.

vertical-align:middle; is not working inside td

Add below code to button css . Refer http://jsbin.com/kixewufe/2/ to view http://jsbin.com/kixewufe/2/edit?html,css,output to view complete code.

vertical-align:middle;
display:inherit;

Vertical-align/Valign not working

The vertical-align property will not apply on nested table elements which have no containing table-cells of their own to maintain the typical tabular structure of a table.

Columns should be kept equal in height for the vertical-align property to result in the expected behaviour, you will require table-cells to do this.

Consider nesting your table elements in separated table cells (td) which you can then declare a vertical-align property value on:

rather this:

<!-- better approach -->
<table>
   <tr>
      <td> <!-- now you can declare a vertical-align property -->
         <table></table>
      </td>
      <td> <!-- now you can declare a vertical-align property -->
         <table></table>
      </td>
   </tr>
</table>

instead of this:

<!-- wrong approach -->
<table>
   <tr>
      <td>
         <table></table>
         <table></table>
      </td>
   </tr>
</table>

Code Snippet Demonstration:

<table bgcolor="#4275A2" width="600" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" style="margin:0 auto;">

  <tr>

    <td style="padding:10px 0;vertical-align: middle;width: 70%;">

      <table align="left" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">

        <tr>

          <td style="font-size: 12px; color: white; font-weight: normal; text-align: left; font-family: Georgia, Times, serif; line-height: 24px; padding:10px 8px 10px 8px">

            <h2 style="mso-table-lspace:0;mso-table-rspace:0;margin:0;font-size:18px;color:white;">Schrijf uw bevindingen ook eens in ons gastenboek. Dat stellen wij, en andere klanten zeer op prijs.

              <br/><br/></h2>

          </td>

        </tr>

      </table>

    </td>

    <td style="padding:10px 0;vertical-align: middle;">

      <table style="veritcal-align:bottom;" cellpadding="0" cellspacing="0" border="0" class="deviceWidth">

        <tr>

          <td bgcolor="#542841" style="background-repeat:no-repeat;">

            <a href="#" style="border-radius: 5px;padding: 20px;color:#ffffff;font-size:13px;font-weight:bold;display:block;text-align:center;text-decoration:none;font-family:Arial, sans-serif;-webkit-text-size-adjust:none;">SCHRIJF REACTIE</a>

          </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

Vertical align not working inside table column

Make sure the td has below CSS

td {display: table-cell;}

CSS vertical-align not working for certain rows/columns of the table

The reason vertical-align isn't working is at the moment is some cells have a padding that is determining their heights. What you need is a smaller padding and a fixed height so that the text has the freedom to be aligned as specified.

td {
    padding: 80px;
    vertical-align: bottom;
    height: 300px;
}

td valign= top not working - CSS overriding somewhere

Your td originally has vertical-align: middle specified inside the CSS. You can override it by using style="vertical-align: top;" inline inside the <td> tag containing your image. This should work perfectly:

<td valign="top" style="vertical-align: top;"><img src="../../../images/site/orangeBanner.png" alt="Sample Image" width="259" height="62" class="imagePic"/></td>

---

Related Topics