居中对齐HTML表格

Question

在我正在处理的页面上,我似乎无法将第一行中的图像和下面的两列文本居中(两列不应超过图像的这是页面:http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html 我花了很多时间试图解决这个问题.我想把它保存在HTML中因为我必须赶时间,因为我必须为每个图像创建20页不同宽度/ +布局的排序.

Answer 1

对于您的设计,通常的做法是使用div而不是表.这样,您的布局将通过适当的样式更易于维护和更改.它确实需要一些人习惯,但从长远来看它会帮助你很多,你会学到很多关于造型的工作原理.但是,我会为您提供解决方案.

在样式表中,边距和填充设置为0像素.这会覆盖您的align="center"属性.我建议您从CSS中取出这些设置,因为您通常不希望以这种方式影响所有元素.如果您已经知道CSS中发生了什么,并且希望保持这种状态,那么您必须将一种样式应用于表以覆盖以前的集合.您可以为表格提供一个class,也可以将样式与HTML内联.以下是两个选项:

1. 上课:

   <table class="centerTable"></table>

在你的style.css文件中你会有这样的东西:

.centerTable { margin: 0px auto; }

2. 内嵌HTML:

   <table style="margin: 0px auto;"></table>

如果您决定清除边距和填充设置为0px,那么您可以保留您希望对齐的任何列align="center"的<td>标记.

Answer 2

table
{ 
margin-left: auto;
margin-right: auto;
}

这肯定会奏效.干杯

Answer 3

试试这个 -

<table align="center" style="margin: 0px auto;"></table>