单元tb格居中显示换行文字的span

编者：李国帅

时间：2021-08-06 

问题描述:

在设计web表格的时候，遇到需要在表格中显示居中换行对齐文字，经过多次尝试，发现可以使用span配合p的方式来实现。效果如下：

代码

<td width="52" valign="center" style="
                    width: 39.3pt;
                    padding: 0pt 5.4pt 0pt 5.4pt;
                    border-left: none;
                    mso-border-left-alt: none;
                    border-right: 1pt solid windowtext;
                    mso-border-right-alt: 0.5pt solid windowtext;
                    border-top: none;
                    mso-border-top-alt: 0.5pt solid windowtext;
                    border-bottom: 1pt solid windowtext;
                    mso-border-bottom-alt: 0.5pt solid windowtext;
                  ">

 <p class="MsoNormal" align="center" style="text-align: center;">
                <b><span style="
                          mso-spacerun: 'yes';
                          font-family: 宋体;
                          font-weight: bold;
                          font-size: 12pt;
                          mso-font-kerning: 1pt;
                          display: inline-block;
                          width:30pt;
                        ">家庭住址
                    <o:p></o:p>
                  </span></b>
              </p>
            </td>

总结：

这里涉及到display: inline-block和display: block的区别，span不容易实现内部的居中对齐，只能通过限制它的位置和大小，然后在外部设置对齐。

Span的属性复杂大小，父对象的属性负责内部元素的对齐属性。

附加：如果使用两个span就会行间距过大

<p class="MsoNormal" align="center" style="
                      text-align: center;
                      line-height: 12pt;

                    ">
                <span style="
                          mso-spacerun: 'yes';
                          font-family: 宋体;
                          font-weight: bold;
                          font-size: 12pt;
                          mso-font-kerning: 1pt;
                          padding:0
                        ">文化</span>
              </p>
                            <p class="MsoNormal" align="center" style="
                      text-align: center;
                    ">
                <span style="
                          mso-spacerun: 'yes';
                          font-family: 宋体;
                          font-weight: bold;
                          font-size: 12pt;
                          mso-font-kerning: 1pt;
                          padding:0
                        ">程度</span>
              </p>

附加：单纯使用 span无法居中

参考：