如何在HTML中对齐div中心

2018-06-03 23:28:20

可能重复：
如何在div中居中div？

以HTML为中心的一种简单方法是使用align='center' ，但它不适用于div。

我试过了：

style='text-align:center';
style='left:50%';

我甚至真的是一个中心标签

<center>

但是我不能让我的目标股为中心。

<!DOCTYPE html>
<html>
  <head>
    <title>Center</title>
  </head>
  <body>

    <div style="text-align: center;">
      <div style="width: 500px; margin: 0 auto; background: #000; color: #fff;">This DIV is centered</div>
    </div>

  </body>
</html>

我认为align="center"对齐了内容，所以如果你想使用这个方法，你需要在'wrapper'div中使用它 - 一个div，它将其余部分封装起来。

text-align正在做类似的事情。

left:50%被忽略，除非你将div的位置设置为相对或绝对。

普遍接受的方法是使用以下属性

width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;

边距是自动的意味着它们的增长/缩小与浏览器窗口（或父div）匹配，

UPDATE

感谢Meo说出了这一点，如果你想要你可以节省时间，并使用短手的余量。

margin:0 auto;

这将顶部和底部定义为0（因为它是零，它对于缺少单位无关紧要）并且左侧和右侧被定义为'自动'然后，如果您不想重复说出顶部边距与任何其他CSS规则。

它取决于你的div是否在位：绝对/固定或相对/静态

对于职位：绝对和固定

<div style="position: absolute; /*or fixed*/; width: 50%; height: 300px; left: 50%; top:100px; margin: 0 0 0 -25%">blblablbalba</div>

这里的诀窍是在对象的宽度的一半处具有负边距

对于职位：相对＆静态

<div style="position: relative; /*or static*/; width: 50%; height: 300px; margin: 0 auto">blblablbalba</div>

对于这两种技术，都必须设定宽度

链接地址: http://www.djcxy.com/p/13199.html

上一篇: How to make a div center align in HTML

下一篇: box wrapping issue