【问题标题】:How to align a <div> to center of the page [duplicate]如何将 <div> 对齐到页面中心[重复]
【发布时间】:2012-03-30 15:29:22
【问题描述】:

可能重复:
How to align a <div> to the middle of the page

我有一个高度设置为 800px 的 div 标签,我希望当浏览器宽度大于 600px 时,它不应该拉伸 div,但应该将它带到页面中间

我怎样才能做到这一点?

我可以使用以下代码吗? 以内容为中心

【问题讨论】:

  • 你可以尝试margin: auto,但请注意这在所有浏览器中都不能正常工作,尤其是。浏览器
  • 离题,但我忍不住分享这个:youtu.be/91TCgj_pQ98?t=3m

标签: html css


【解决方案1】:

简答:

边距设置为自动

<html>
<head><title>Your Title</title></head>
<body>
<div style="width:600px; margin:auto; border:1px solid red">
</div>
</body>
</html>

长答案:

您可能希望为该 div 设置一个 id,并为相应的 css 选择器提供规则,而不是使用类似的内联样式。

另外,要在 ie 6 和 7 中正常工作,您需要给出 doctype 声明,否则它将无法工作,因为 ie 将在 quirks 模式下工作 http://www.satzansatz.de/cssd/quirksmode.html

所以完整的答案应该是这样的

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
       <title>Your Title</title>
       <style>#container { width:600px; margin:auto; border:1px solid red }</style>
    </head>
    <body>
       <div id="container">
       </div>
    </body>
    </html>

【讨论】:

  • 我可以使用下面的代码吗?
    内容居中
  • 是的,你可以,0 auto 只是表示上下边距为 0,左右边距为 auto。
【解决方案2】:

在 css 中加入以下属性:

max-width:600px;
position:relative;
margin:auto;

我不清楚的一点是,如果浏览器宽度小于 600 像素,您是否希望 div 占用浏览器的宽度?

【讨论】:

  • 位置默认是相对的
  • 其实位置默认是父位置。我们不知道 div 的确切位置
  • 我可以使用下面的代码吗?
    内容居中
  • 我不同意,默认位置是static,所以你需要在top:left:生效之前明确定义position:relative
  • @chetan 是的,你可以,因为身体的高度将占据 div 的全部高度,所以两个边距声明不会有太大差异.....但是你想要宽度800 像素还是 600 像素?
猜你喜欢
  • 2014-02-11
  • 2019-10-14
  • 2012-02-15
  • 2013-09-27
  • 1970-01-01
  • 1970-01-01
  • 2018-02-25
  • 1970-01-01
  • 2015-03-03
相关资源
最近更新 更多