如何将<div>对齐到页面的中间(水平/宽度)

我有一个div标签，宽度设置为800像素。当浏览器宽度大于800像素时，它不应该拉伸div，但应该将它带到页面的中间。

当前回答

为了让它在ie6中也能正常工作，你必须这样做:

HTML

<body>
    <div class="centered">
        centered content
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}

2009-06-05 07:54:07

其他回答

<body>
    <div style=" display: table; margin: 250 auto;">
        In center
    </div>
</body>

如果你想改变垂直位置，改变250的值，你可以根据你的需要安排内容。不需要给出宽度和其他参数。

2014-10-29 11:50:55

只需在body标签之后使用center标签，并在body结束之前结束center标签:

<body>
    <center>
        ... Your code here ...
    </center>
</body>

在我尝试过的所有浏览器中，这都是可行的。

2012-05-11 10:45:32

Flexbox解决方案是2015年的发展方向。Justify-content: center用于父元素将内容对齐到它的中心。

HTML

<div class="container">
  <div class="center">Center</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}

输出

.container { 显示:flex; justify-content:中心; ｝ .center { 宽度:400 px; 填充:10 px; 背景:# 5 f85db; 颜色:# fff; 粗细:大胆的; 字体类型:大河马字体; ｝ < div class = "容器" > <div class="center"> div居中，文本左对齐 < / div >

2015-08-17 17:25:29

旧代码中其他一些预先存在的设置将阻止div页面居中L&R:

隐藏在外部样式表链接中的其他类。其他类嵌入到像img这样的东西中(比如旧的外部CSS打印格式控件)。带有id和/或CLASSES的图例代码将与命名div类冲突。

2012-05-16 17:20:32

使用CSS flex属性:http://jsfiddle.net/cytr/j7SEa/6/show/

body {                       /* Centered */
  display: box;
  flex-align: center;
  flex-pack: center;
}

2013-03-30 19:25:54

如何将<div>对齐到页面的中间(水平/宽度)

推荐文章

最新文章

标签