Maison >interface Web >tutoriel HTML >Le contenu du tableau en HTML est affiché horizontalement et verticalement au centre

Le contenu du tableau en HTML est affiché horizontalement et verticalement au centre

不言
不言original
2018-06-05 16:34:357136parcourir

Cet article présente principalement les informations pertinentes sur le centrage horizontal et vertical du contenu des tableaux en HTML. Les amis dans le besoin peuvent se référer à

Spécifiez

#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>

Ce qui précède consiste à spécifier l'identifiant comme classe dans p, puis l'attribut td de table utilise le style spécifié en css, à peu près comme indiqué dans la figure

Le contenu du tableau en HTML est affiché horizontalement et verticalement au centre

Recommandations associées :


Html pour réaliser l'effet de rapport de l'affichage dynamique des blocs de couleur (exemple de code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn