PHP TCPDF - 如何垂直对齐表格单元格中的文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10781103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PHP TCPDF - How do I vertical align text in a table cell?
提问by Kosta Kontos
By default, the values within tables cells (within tables generated by TCPDF) are vertically aligned right at the top of the cell.
默认情况下，表格单元格中的值（在由 TCPDF 生成的表格中）在单元格顶部垂直对齐。
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.
例如，一个建议 (http://sourceforge.net/projects/tcpdf/forums/forum/435311/topic/4385696) 是使用 TCPDF 的 MultiCell() 方法设置每个单元格的内容，但是当您简单地想写出你的 HTML 代码，然后生成 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.
另一个建议（http://bytethinker.com/blog/tcpdf-and-vertical-alignment-of-table-cells）是在每个单元格内放置跨度并在这些跨度中创建带有换行符的空行，以强制您的文本向下（因此朝向垂直中心），但这有点麻烦。
Has anyone found a better / cleaner way to achieve this? Surely a library this popular would cater for such a common requirement?
有没有人找到更好/更清洁的方法来实现这一目标？这么受欢迎的图书馆肯定会满足这种常见的需求吗？
回答by JayEdgar
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.
请记住，TCPDF 无法像浏览器那样处理完整的 HTML 和 CSS。Nicolas 在渲染最常用的 HTML 代码方面做得很好。CSS 不能放在文档的顶部，它必须放在内联。
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.
表格必须完全手动格式化——单元格不会像在浏览器中那样自动调整大小。同样，您必须弄清楚某物有多高，并根据需要添加<BR>s 或调整一个不可见图像的大小以将其向下推。
Perhaps one day he will add more of this functionality. As it is, I find the class amazing.
也许有一天他会添加更多这种功能。事实上，我觉得这门课很棒。
回答by Nawlbergs
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...
调整 的字体大小 提高或降低文本......它是一个黑客，但它确实有效。<br /> 的工作也是......但他们会不太准确......
回答by Sahana
The following ways worked for me. 1. Write the below code just above table tag.
以下方法对我有用。1.在表格标签上方编写以下代码。
<style> td{height: 20px;line-height:10px;}</style>
Note:Height should be double of line-height.
注意：高度应该是行高的两倍。
Use cellpadding attribute at table level. For e.g.,
cellpadding="5"
在表级别使用 cellpadding 属性。例如，
单元格填充=“5”
In both ways you need to adjust the height.
在这两种方式中，您都需要调整高度。
回答by Arash125
This worked for me :
这对我有用：
<td align="center" style="height: 50px;">
<div style="vertical-align: middle;">
<p>This Is My text</p>
</div>
</td>
回答by hank
I have a table with one column having a different font size (cause the numbers are big and wouldn't stay on one line if not made smaller) and the client wants them to be vertically centered in the cells.
我有一个表格，其中一列具有不同的字体大小（因为数字很大，如果不缩小就不会停留在一行上）并且客户希望它们在单元格中垂直居中。
After trying all the hacks I have learnt in my history of HTML and CSS and TCPDF every time mocking at me I finally deviced such a clever solution which it didn't anticipat and finally I got the vertical cell alignment more or less into the place ie in the middle of the cell.
在尝试了我在 HTML、CSS 和 TCPDF 的历史中每次嘲笑我时学到的所有技巧之后，我终于设计了一个它没有预料到的聪明的解决方案，最后我或多或少地获得了垂直单元格对齐的位置，即在单元格的中间。
I found out that if there is an image in the same cell, TCPDF aligns the text on the bottom-line of the image. So I made an utility script to serve me with a white image of parametrized width and height and put that in front of the text. One can also just make a white image of wanted dimensions and use it but I found it easier to experiment with the script and varying parameters. In my case the wwidth is just 1px, but theoretically one could also push text to the right with the image.
我发现如果同一个单元格中有图像，TCPDF 会在图像的底线对齐文本。所以我制作了一个实用程序脚本来为我提供一个参数化宽度和高度的白色图像，并将其放在文本前面。也可以只制作所需尺寸的白色图像并使用它，但我发现用脚本和不同的参数进行试验更容易。就我而言，wwidth 仅为 1px，但理论上也可以将文本与图像一起推到右侧。
Of course there are some problems with this approach as well but in my case all the numbers are quite well-behaving. If the height of either the centered text or other columns vary heavily it is very difficult to find a good value (though with parametrization one could try to calculate the height needed from the lengths of each cell on the row).
当然，这种方法也存在一些问题，但就我而言，所有数字都表现得很好。如果居中文本或其他列的高度变化很大，则很难找到一个好的值（尽管通过参数化可以尝试根据行上每个单元格的长度计算所需的高度）。
I would still prefer if there could at least be top-padding or top-margin that one could set into the cell (working vertical-align would be even more desirable but even having any tool would make life easier)
我仍然希望至少可以在单元格中设置顶部填充或顶部边距（使用垂直对齐会更可取，但即使使用任何工具也会使生活更轻松）
Hope this helps even some other poor coder
希望这甚至可以帮助其他一些糟糕的编码员
hank
汉克
回答by Aman
Adding style="line-height:50%;" in image tag works for me. Please give this a try. In my case, I wanted to vertical align image in table cell. You can add div in table cell and can add image or text inside it. Below works for me.
添加样式="线高:50%;" 在图像标签中对我有用。请试一试。就我而言，我想在表格单元格中垂直对齐图像。您可以在表格单元格中添加 div 并可以在其中添加图像或文本。下面对我有用。
<div align="center"><img src="images/logo_example.png" border="0" height="30" width="30" style="line-height:50%;"/></div>
<div align="center"><img src="images/logo_example.png" border="0" height="30" width="30" style="line-height:50%;"/></div>
回答by Steve Lockwood
I wanted to bottom-align some - but not all - cells. I found that simply padding with <br>didn't work.
我想底部对齐一些 - 但不是全部 - 单元格。我发现简单地填充<br>不起作用。
Instead you need to use <br>- this then pushed the text down.
相反，您需要使用 <br>- 然后将文本向下推。
回答by Silvan
Maybe with smaller line heights this is a workaround:
也许行高较小，这是一种解决方法：
<table width="100%" cellpadding="5" cellspacing="0">
<table width="100%" cellpadding="5" cellspacing="0">
cellpadding value is the cell height / 2 . Doesn't look nice if you need more space/height otherwise this will the better solutions: http://bytethinker.com/blog/tcpdf-and-vertical-alignment-of-table-cells
cellpadding 值是单元格高度 / 2 。如果您需要更多空间/高度，看起来不太好，否则这将是更好的解决方案：http: //bytethinker.com/blog/tcpdf-and-vertical-alignment-of-table-cells
回答by mmoore500
Nest another TABLE and add another ROW. Add an empty TD before the content you want vertically aligned and add a height attribute to it. This should give you granular control on the vertical spacing.
嵌套另一个 TABLE 并添加另一个 ROW。在要垂直对齐的内容之前添加一个空的 TD 并为其添加高度属性。这应该可以让您对垂直间距进行精细控制。
Here's an example:
下面是一个例子：
'<table cellpadding="0" border="0" style="border-collapse: collapse;">' .
'<tr>' .
'<td width="148" height="80">' .
'<img width="128" src="' . "images/gcs_logo.svg" . '"/>' .
'</td>' .
'<td style="line-height:14px; font-size:11px;">' .
'<table cellpadding="0" border="0" style="border-collapse: collapse;">' .
'<tr style="color:#000000;">' .
'<td height="23" style="text-decoration:underline;padding:0;"></td>' .
'</tr>' .
'<tr style="color:#000000;">' .
'<td style="padding:0;">18191 Von Karman Avenue<br/>Suite 300<br/>Irvine, California 92612</td>' .
'</tr>' .
'</table>' .
'</td>' .
'</tr>' .
'</table>';
回答by Ibrahim Isa
Use inline styling for the <td>tag, and then vary the percentage to set the text at the suitable position you want on the pdf display.
e.g
对<td>标签使用内联样式，然后改变百分比以将文本设置在 pdf 显示上所需的合适位置。例如
<td style="line-height: 250%;">'. $variable .'</td>
