在 PHP SQL 显示的 <td> 列中居中文本[重复]

Posted 2023-03-05

【中文标题】在 PHP SQL 显示的 <td> 列中居中文本[重复]

【英文标题】：Centering text in a <td> column on a PHP SQL display [duplicate]

【发布时间】：2019-10-06 15:00:00

【问题描述】：

我有一个表，它使用 php 通过 SQL 显示数据。问题是因为第二列是图片（列名“thumbsrc”），第一列的文本（列名“photosrc”）没有居中并停留在顶部。

                <table class="table table-hover spacer">
                  <thead align="center" class="strong">
                    <td>NAME</td>
                    <td>PHOTO</td>
                    <td></td>
                  </thead>

                  <?php foreach($lstProperty as $rowProperty)  ?>
                    <tr align="center">

                      <td>
                        <?php
                          echo($rowProperty['photosrc']);
                        ?>
                      </td>

                      <td>
                        <img src="../img/_uploads/lease/thumbs/<?php echo $rowProperty['thumbsrc']; ?>.jpg" class="w-10">
                      </td>

                      <td>
                        <img src="img/icon-remove.png"></a>
                      </td>

                    </tr>
                  <?php  ?>
                </table>

我试图将第一列居中：

                      <td>
                        <?php
                          echo($rowProperty['photosrc']);
                        ?>
                      </td>

我尝试过：

 <td style="margin: 0 auto;">

 <td style="margin-top: auto; margin-bottom: auto;">

也尝试过引导类：

 <td class="my-auto">

这些都不是使文本居中。希望获得有关正确工作代码的帮助。

【问题讨论】：

添加 text-align:center 或 vertical-align:middle 到您的 my-auto 课程中，具体取决于您要居中的方式

align="center" 水平居中，您希望 valign="middle" 垂直居中。 valign 已经过时了，你应该使用 CSS：developer.mozilla.org/en-US/docs/Web/html/Element/…

这到底和 PHP 有什么关系？

尝试了手动“样式”来检查建议是否有效。似乎没有效果：

我建议不要编写内联 CSS。只需给列一个类并在您的 .css 文件中设置样式。

【参考方案1】：

由于missing support in HTML 5，不建议通过 align 属性使行居中。改用 CSS。

要使文本水平居中，请使用 <td align="center">My Text</td> 或 CSS： <td style="text-align: center;">My Text</td>。 CSS text-align property

对于垂直对齐，您可以使用 CSS 属性 vertical-align 和值 middle。

也就是说，你应该使用

<td style="text-align: center; vertical-align: middle;">
    <?php
       echo($rowProperty['photosrc']);
    ?>
</td>

【讨论】：

HTML 5 不支持它。我将相应地编辑我的答案并声明不应通过 align 属性进行居中，而应使用 CSS。你说得对，我的陈述在这里具有误导性，这取决于所需的布局。

您的编辑使它更清晰... :-) 就个人而言，我宁愿建议设置一个类，然后在 .css 文件中设置样式。

【参考方案2】：

表格单元格默认垂直居中对齐。父类可能会覆盖默认值。所以你可以使用内联样式再次强制它：

垂直居中：

<td style="vertical-align:middle">

用于水平居中：

<td style="text-align:center">