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

编者：李国帅

qq：9611153 微信lgs9611153

时间：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无法居中

参考：

block，inline和inline-block概念和区别 - K.W - 博客园 (cnblogs.com)