居中对齐 HTML 表格 [英] Center-align a HTML table
问题描述
在我目前正在处理的页面上，我似乎无法将表格居中，第一行有一个图像，下面有两列文本(两列不应该更多比图像的宽度)这是页面:http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html我花了很多时间试图解决这个问题.我想将它保留在 HTML 中，因为我必须赶时间，还因为我必须为每个图像创建 20 个具有不同宽度/+ 布局的页面.
On a page I'm working on at the moment, I can't seem to be able to center a table with an image in the first row and two columns of text below it (the two columns shouldn't be more than the image's width) Here's the page : http://www.puzzles-et-jeux.com/fr/page/minipuzzles.html I spent a lot of time trying to solve this. I would like to keep it in HTML because I have to rush and also because I have to create 20 pages of the sort with different widths /+ layouts for each image.
推荐答案
对于您的设计，通常的做法是使用 div 而不是表格.这样，您的布局将通过适当的样式更易于维护和更改.这确实需要一些时间来适应，但从长远来看，它将对您有很大帮助，并且您将学到很多关于样式如何工作的知识.但是，我会为您提供解决手头问题的方法.
For your design, it is common practice to use divs rather than a table. This way, your layout will be more maintainable and changeable through proper styling. It does take some getting used to, but it will help you a ton in the long run and you will learn a lot about how styling works. However, I will provide you with a solution to the problem at hand.
在您的样式表中，您将边距和填充设置为 0 像素.这会覆盖您的 align="center" 属性.我建议将这些设置从 CSS 中移除，因为您通常不希望所有元素都以这种方式受到影响.如果您已经知道 CSS 中发生了什么，并且希望保持这种状态，那么您必须将样式应用到您的表格以覆盖之前的集合.您可以为表格指定一个 class，也可以将样式与 HTML 内联.这里有两个选项:
In your stylesheets you have margins and padding set to 0 pixels. This overrides your align="center" attribute. I would recommend taking these settings out of your CSS as you don't normally want all of your elements to be affected in this manner. If you already know what's going on in the CSS, and you want to keep it that way, then you have to apply a style to your table to override the previous sets. You could either give the table a class or you can put the style inline with the HTML. Here are the two options:
有一个类:
With a class:
在你的 style.css 文件中，你会有这样的内容:
In your style.css file you would have something like this:
.centerTable { margin: 0px auto; }
与您的 HTML 内联:
Inline with your HTML:
<table style="margin: 0px auto;"></table>
如果您决定清除设置为 0px 的边距和填充，那么您可以将 align="center" 保留在 <td> 标签上要对齐的列.
If you decide to wipe out the margins and padding being set to 0px, then you can keep align="center" on your <td> tags for whatever column you wish to align.
这篇关于居中对齐 HTML 表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
