首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在HTML中使div居中对齐

如何在HTML中使div居中对齐
EN

Stack Overflow用户
提问于 2010-04-22 21:27:02
回答 4查看 183.7K关注 0票数 70

可能重复:

How to horizontally center a div?

在超文本标记语言中放置对象的一个简单方法是使用align='center',但它不适用于div。

我试过了:

代码语言:javascript
复制
style='text-align:center';
style='left:50%';

我甚至做了一个正中标记

代码语言:javascript
复制
<center>

但是我不能让我的目标div居中。

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2010-04-22 21:28:01

代码语言:javascript
复制
<!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>

在IE,Firefox,Chrome,Safari和Opera中测试和工作。我没有测试IE6。IE需要外部文本对齐。其他浏览器(和IE9?)当您将DIV边距(左和右)值设置为auto时,将会起作用。页边距"0自动“是页边距"0自动0自动”(右上角、左下角)的缩写。

注意:文本也在内部DIV中居中,如果您希望它保持在左侧,只需为内部DIV指定text-align: left;即可。

编辑:在标准模式下运行的IE 6、7、8和9将与设置为自动的边距一起工作。

票数 55
EN

Stack Overflow用户

发布于 2010-04-22 21:32:32

我认为align="center"会对齐内容,所以如果你想使用这种方法,你需要在一个“包装器”div中使用它--一个只包装其余内容的div。

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

除非您将left:50%的位置设置为类似于相对或绝对的值,否则div将被忽略。

通常接受的方法是使用以下属性

代码语言:javascript
复制
width:500px; // this can be what ever unit you want, you just have to define it
margin-left:auto;
margin-right:auto;

边距是自动的,意味着它们会放大/缩小,以匹配浏览器窗口(或父div)

更新

感谢Meo指出这一点,如果你愿意,你可以节省时间,并使用速记属性作为保证金。

代码语言:javascript
复制
margin:0 auto;

这将顶部和底部定义为0(因为它是0,这与缺少单位无关),并且将左侧和右侧定义为'auto‘,然后,如果您不想覆盖其他CSS规则,则可以重写顶部边距。

票数 12
EN

Stack Overflow用户

发布于 2010-04-22 21:34:59

这取决于您的div是否到位:绝对/固定或相对/静态

对于位置:绝对和固定

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

这里的诀窍是将对象宽度的一半设置为负边距

对于位置:相对和静态

代码语言:javascript
复制
<div style="position: relative; /*or static*/;
width: 50%;
height: 300px;
margin: 0 auto">blblablbalba</div>

对于这两种技术,都必须设置宽度。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/2691178

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档