Question

默认情况下，表格单元格中的值（在TCPDF生成的表格内）垂直对齐在单元格的顶部。

有没有人找到一种简单的方法将文本垂直对齐到单元格的中间？

我在网上找到了一些建议的解决方案，但这些并不能让我理想。

例如，一个建议（http://sourceforge.net/projects/tcpdf/forums/forum/435311/topic/4385696）是使用TCPDF的MultiCell（）方法设置每个单元格的内容，但是当您只是想写出HTML代码然后生成PDF时，这很痛苦。

另一个建议（http://bytethinker.com/blog/tcpdf-and-vertical-alignment-of-table-cells）是在每个单元格中放置跨距并在这些跨度中创建带换行符的空白行，以便迫使你的文字向下（因此朝向垂直中心），但这有点像黑客。

有没有人找到更好/更清洁的方法来实现这一目标？当然这个受欢迎的图书馆可以满足这样一个共同的要求吗？

Answer 1

请记住，TCPDF无法像浏览器那样处理完整的HTML和CSS。 Nicolas在渲染最常用的HTML代码方面做得很好。 CSS不能放在文档的顶部，必须放在内联。

表必须完全手动格式化 - 单元格不会像在浏览器中那样自动调整大小。同样地，您必须弄清楚某些东西的高度，并添加<BR>或调整不可见图像的大小，以便在需要时将其推下来。

也许有一天他会添加更多此功能。事实上，我发现这个课很棒。

Answer 2

以下方式对我有用。 1.在表格标签上面写下面的代码。

<style> td{height: 20px;line-height:10px;}</style>

注意：高度应该是行高的两倍。

在表级使用cellpadding属性。例如，

CELLPADDING = “10”

在两种方式中，您都需要调整高度。

Answer 3

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">&nbsp;</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...

Answer 4

我想底部对齐一些 - 但不是全部 - 细胞。我发现简单填充<br>并不起作用。

相反，您需要使用 <br> - 然后将文本向下推。

Answer 5

我有一个表格，其中一列具有不同的字体大小（因为数字很大，如果不变小则不会停留在一行上）并且客户希望它们在单元格中垂直居中。 / p>

在尝试了我在HTML和CSS以及TCPDF的历史中学到的所有黑客之后，每次嘲笑我时，我终于设计了一个它没有预料到的这样一个聪明的解决方案，最后我得到了更多的垂直单元格对齐或者少进入这个地方，即在牢房中间。

我发现如果同一单元格中有图像，TCPDF会对齐图像底线上的文本。所以我制作了一个实用程序脚本来为我提供参数化宽度和高度的白色图像，并将其放在文本的前面。人们也可以制作想要尺寸的白色图像并使用它但我发现更容易尝试使用脚本和不同的参数。在我的情况下，wwidth只有1px，但理论上也可以用图像将文本推到右边。

当然这种方法也存在一些问题，但在我的情况下，所有数字都表现得非常好。如果居中文本或其他列的高度变化很大，则很难找到一个好的值（尽管使用参数化可以尝试从行上每个单元格的长度计算所需的高度）。

我仍然更喜欢，如果至少有一个可以设置到单元格中的顶部填充或顶部边距（工作垂直对齐将更加可取，但即使有任何工具也会使生活更轻松）

希望这对其他一些糟糕的程序员有帮助

绞纱

Answer 6

添加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>

Answer 7

这对我有用：

<td align="center" style="height: 50px;">
<div style="vertical-align: middle;">
<p>This Is My text</p>
</div>
</td>

Answer 8

可能使用较小的线高度，这是一种解决方法：

<table width="100%" cellpadding="5" cellspacing="0">

cellpadding值是单元格高度/ 2。如果你需要更多的空间/高度，看起来不是很好否则这将是更好的解决方案：http://bytethinker.com/blog/tcpdf-and-vertical-alignment-of-table-cells

Answer 9

嵌套另一个TABLE并添加另一个ROW。在要垂直对齐的内容之前添加空TD，并为其添加height属性。这应该可以精确控制垂直间距。

以下是一个例子：

'<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>';

Answer 10

为<td style="line-height: 250%;">'. $variable .'</td>标记使用内联样式，然后改变百分比以将文本设置在pdf显示的所需位置。例如


    public static Stopwatch sw;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            sw = new Stopwatch();
            sw.Start();
        }
    }
    protected void tm1_Tick(object sender, EventArgs e)
    {
        long milsecs = sw.Elapsed.Milliseconds;
        if (Label2.Text.Trim().Length > 0)
        {
            Label1.Text = DateTime.Now.ToString("00:ff");
        }
        sw.Stop();
        //Label1.Visible = false;
    }

Answer 11

您可以使用<td>

为 <br/>表格添加空间

我发现这link可以帮助你

Answer 12

我用span标记内的一个字母解决了这个问题；例如：

select * from CSAttribute where AttributeID = 'SALESGOALY'

通过调整字体大小，我可以处理单元格的高度，并且由于文本始终是基线，因此可以工作。

Answer 13

它的工作（cellpadding）......

<table border="1" cellpadding="5" style="font-size:10px;">

$html .= '<table border="1" cellpadding="5" style="font-size:10px;">';
$html .= '<tr style="font-weight:bold;text-align:center;line-height:11px;" >';
$html .= '<th>School/College Name</th>';
$html .= '<th>Board</th>';
$html .= '<th>Language</th>';
$html .= '<th>Percentage</th>';
$html .= '<th>Place</th>';
$html .= '</tr>';
$html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >';
$html .= '<td style="vertical-align: middle;font-weight:bold;">' . $tenInfo[0]['school_college_name'] . '</td>';
$html .= '<td style="vertical-align: middle">' . $tenInfo[0]['board']. '</td>';
$html .= '<td style="vertical-align: middle">' . $tenInfo[0]['main_lang']. '</td>';
$html .= '<td style="vertical-align: middle">' . $tenInfo[0]['percentage']. '</td>';
$html .= '<td style="vertical-align: middle">' . $tenInfo[0]['school_college_place']. '</td>';
$html .= '</tr>';

$html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >';
$html .= '<td style="vertical-align: middle">' . $plusInfo[0]['school_college_name'] . '</td>';
$html .= '<td style="vertical-align: middle">' . $plusInfo[0]['board']. '</td>';
$html .= '<td style="vertical-align: middle">' . $plusInfo[0]['main_lang']. '</td>';
$html .= '<td style="vertical-align: middle">' . $plusInfo[0]['percentage']. '</td>';
$html .= '<td style="vertical-align: middle">' . $plusInfo[0]['school_college_place']. '</td>';
$html .= '</tr>';

$html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >';
$html .= '<td style="vertical-align: middle">' . $ugInfo[0]['school_college_name'] . '</td>';
$html .= '<td style="vertical-align: middle">' . $ugInfo[0]['board']. '</td>';
$html .= '<td style="vertical-align: middle">' . $ugInfo[0]['main_lang']. '</td>';
$html .= '<td style="vertical-align: middle">' . $ugInfo[0]['percentage']. '</td>';
$html .= '<td style="vertical-align: middle">' . $ugInfo[0]['school_college_place']. '</td>';
$html .= '</tr>';


$html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >';
$html .= '<td>' . $pgInfo[0]['school_college_name'] . '</td>';
$html .= '<td>' . $pgInfo[0]['board']. '</td>';
$html .= '<td>' . $pgInfo[0]['main_lang']. '</td>';
$html .= '<td>' . $pgInfo[0]['percentage']. '</td>';
$html .= '<td>' . $pgInfo[0]['school_college_place']. '</td>';
$html .= '</tr>';
$html .= '</table>';

PHP TCPDF - 如何垂直对齐表格单元格中的文本？

13 个答案: