Html 将表格与页面中心对齐

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4434865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 05:42:16  来源:igfitidea点击:

Align the table on the center of the page

htmlcss

提问by user770022

I just want to put the table in the middle of the page. Any help would be great.

我只想把桌子放在页面的中间。任何帮助都会很棒。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Randy's first html web page !</title>
<style type="text/css">
body
{background-image:url('Koala.gif');} 
h1
{
text-align:center;
}
h2
{
text-align:center;
}
p
{
text-align:center;
font-size:200%;
color:#00fff0;
}
div
{
background-color:#efffff;
}
</style>
</head>
<h1> Hello Professor</h1>
<h2> By: Randy White</h2>
<P> I haven't done anything like this before.</P> 
<P>Seems to be ok</P>
<P><img src="Hydrangeas.jpg" width="150" height="100" alt="Hydrangeas.jpg"></P> 
<table border="1">
<tr>
<th>Month</th>
<th>Day</th>
<th>Year</th>
</tr>
<tr>
<td>December</td>
<td>1</td>
<td>2010</td>
</tr>
</table>
<a href="http://www.google.com">Visit Google!</a>
</body>
</html>

回答by Kos

Try:

尝试:

table {
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

or:

或者:

table {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

BTW, this sets this for all tables. You might want to have the properties on a more specific selector (like table.someclass).

顺便说一句,这为所有表设置了这个。您可能希望在更具体的选择器(如table.someclass)上拥有属性。

回答by Ilyssis

old style is align="center":

旧样式是 align="center":

<table width="400" border="0" cellspacing="0" cellpadding="0" align="center">

回答by Jason

To horizontally align table in the middle of the page, and also make table width fit itself automatically, try below:

要在页面中间水平对齐表格,并自动调整表格宽度,请尝试以下操作:

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