Menu
By default, the values within tables cells (within tables generated by TCPDF) are vertically aligned right at the top of the cell.
Has anyone found a simple method for vertically aligning text to the middle of the cell?
I have found a couple of proposed solutions online but these don't strike me as ideal.
For example one suggestion (http://sourceforge.net/projects/tcpdf/forums/forum/435311/topic/4385696) is to set the contents of each cell using TCPDF's MultiCell() method, but this is a pain when you simply want to write out your HTML code and then generate the PDF.
Another suggestion (http://bytethinker.com/blog/tcpdf-and-vertical-alignment-of-table-cells) is to place spans within each cell and create blank lines with line breaks in these spans in order to force your text down (and thus towards the vertical centre), but this is a bit of a hack.
Has anyone found a better / cleaner way to achieve this? Surely a library this popular would cater for such a common requirement?
944
Select the text and go to the Layout tab and the Alignment section of the ribbon. Choose “Align Center.” Your text will then be right in the middle of the cell. Centering the text in your Word table is a simple task whether horizontally, vertically, or both.
The HTML <td> valign Attribute is used to specify the vertical alignment of text content in a cell.
To center align text in table cells, use the CSS property text-align. The <table> tag align attribute was used before, but HTML5 deprecated the attribute. Do not use it. So, use CSS to align text in table cells.
To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row.
If its a static table... you can add invisible text above the contents to push the text down:
<td width="12%" style="text-align:center">
<div style="font-size:10pt"> </div>
<b>The contents of my cell...</b>
</td>
Adjust the font-size of the to raise or lower the text... Its a hack, but it does work. <br />'s work too... but they will be less accurate...
63
Remember that TCPDF cannot handle full-blown HTML and CSS the way a browser can. Nicolas has done a good job of rendering the most-used HTML codes. CSS cannot be placed at the top of the document, it must be put inline.
Tables must be formatted completely manually--cells do not auto-size the way they do in a browser. Likewise, you must figure out how tall something is and add <BR>s or size an invisible image to push it down if you want.
Perhaps one day he will add more of this functionality. As it is, I find the class amazing.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
