The content of the table in HTML is displayed horizontally and vertically in the center

This article mainly introduces the relevant information on the horizontal and vertical centering of the content of the table table in HTML. Friends in need can refer to the following

Specify in the CSS style file

#class td /*设置表格文字左右和上下居中对齐*/ 
{  
    vertical-align: middle;
    text-align: center;  
}
/*class 是所属的类*/
<p id="class" align="center" style= "margin: 0cm 0cm 0pt; text-align: left">                                                                      
<table class="table table-bordered" border="1" width="100%" style="font-size: 14pt; color: #000000; font-family: 楷体;mso-ascii-font-family: &#39;times new roman&#39;; mso-hansi-font-family: &#39;times new roman&#39;">                                                             
<caption><h2 style="text-align: left;font-size: 16pt;font-family: 宋体;color: red;">title</h2><
/caption>                                                              
<tbody >                                                                 
<tr style="font-weight: bold;mso-bidi-font-size: 12.0pt;font-family: 宋体;" >                                                                      
<td>序号</td>                                                                      
<td>适用情况</td>                                                                      
 <td>详情</td>                                                                       
<td>备注</td>                                                                   
 </tr>                                                                                                                                       
<tr>                                                                    
<td>1</td>                                                                     
<td>xxxxx</td>                                                                      
<td style="text-align: left;"> <!--指定靠左对齐-->                                                                     
 <span>                                                                             
xxxxxx<br>                                                                                                                                                        
</span>                                                                      
</td>                                                                       
<td><a href="#">查看详情</a>
</td>                                                              
</tr>                                                
</tbody>                                                          
</table> 
</p>

The above is to specify the id as class in p, then the attribute td of the table uses the style specified in css, as shown roughly in the figure

Related recommendations:

Html realizes the report effect of dynamically displaying color blocks (example code)

The above is the detailed content of The content of the table in HTML is displayed horizontally and vertically in the center. For more information, please follow other related articles on the PHP Chinese website!