需要帮助集中页面上的div类 [英] Need help centering a div class on page
问题描述
我对HTML和CSS相当陌生，并且一直试图弄清楚如何将这个名为 .content 的div类放在页面中间缠绕着我的表格数据。我搜索了一下，我发现我应该将左边距设置为 0 ，右边距设置为 auto 但是当我这样做时，我得到的是整个表格停留在页面的左侧。
现在我有 margin-左在 500px 试图让它靠近页面的中心，但我认为如果我这样做它不会居中其他屏幕不同的分辨率，我希望无论屏幕尺寸是什么，它都可以居中。
HTML
< body>
< h1>表< / h1>
< div class =content>
< table>
< tr>
< th>数据< / th>
< th>数据2< / th>
< th> Data 3< th>
< / tr>
< tr>
< td>数据1< / td>
< td>数据2< / td>
< td>数据3< / td>
< / tr>
< / table>
< / div>
< / body>
CSS
body {
border：1px;
border-color：black;
border-style：dashed;
}
h1 {
border：1px;
border-color：green;
border-style：dashed;
颜色：红色;
text-align：center;
}
.content {
border：1px;
border-color：orange;
border-style：dashed;
颜色：红色;
display：inline-block;
margin_right：auto;
margin-left：500px;
text-align：center;
}
.content th {
border：1px;
border-color：green;
border-style：dashed;
}
.content td {
border：1px;
border-color：red;
border-style：dashed;
颜色：蓝色;
$ / code $ <$ $ p
解决方案 由于您的 .content 没有固定的宽度，因此您不能使用 margin：0px auto 来将内容居中。在你的情况下，你可以在表这样的元素：
table {
margin：0px auto;
}
但您需要移除 display：inline-block 来自 .content 这个工作。
I'm fairly new to HTML and CSS and I've been trying to figure out how to center this div class called .content in the middle of the page that is wrapped around my table data. I have googled around and what I have found is that I should set the left margin to 0 and the right margin to auto but what I get when I do this is the entire table stays on the left side of the page.
Right now I have the margin-left at 500px trying to to get it close to the center of the page but I think if I do it this way it will not be centered on other screens with different resolutions and I would like for it to be centered no matter what the screen size is.
HTML
<body>
<h1>Table</h1>
<div class="content">
<table>
<tr>
<th>Data</th>
<th>Data 2</th>
<th>Data 3</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
</table>
</div>
</body>
CSS
body {
border: 1px;
border-color: black;
border-style: dashed;
}
h1 {
border: 1px;
border-color: green;
border-style: dashed;
color: red;
text-align: center;
}
.content {
border: 1px;
border-color: orange;
border-style: dashed;
color: red;
display: inline-block;
margin_right: auto;
margin-left: 500px;
text-align: center;
}
.content th {
border: 1px;
border-color: green;
border-style: dashed;
}
.content td {
border: 1px;
border-color: red;
border-style: dashed;
color: blue;
}
解决方案 Since your .content does not have a fixed width you cannot use margin:0px auto which would center the content. In your case u can just it on the table element like this:
table{
margin:0px auto;
}
but you need to remove display:inline-block from .content for this to work.
这篇关于需要帮助集中页面上的div类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
