登陆      注册    找回密码   会员投稿 宽屏版 I 换肤 手机版 | 收藏本站   当前时间是: 
首页>技术文档>html5/cs3前端>正文


解决div布局时不能居中、居中失灵

来源:互联网   作者:佚名   浏览:243次   发表时间:2022-8-29 6:23:00
【字体: 视力保护色:

一般情况下,div不能居中,div居中失灵是因为页面没有声明引起的:加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
即可

使用margin-left:auto;margin-right:auto; 可以让你的div居中对齐。如 
.style{margin-left:auto;margin-right:auto;} 
缩写形式为: 
.style{margin:0 auto;} 
数字0 表示上下边距是0。可以按照需要设置成不同的值。 
查看下面的例子: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
<title>居中div演示效果</title>    
<style type="text/css">    
.align-center{     
    margin:0 auto;       /* 居中 这个是必须的,,其它的属性非必须 */     
     width:500px;         /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */     
     background:red;      /* 背景色 */     
     text-align:center;   /* 文字等内容居中 */     
}     
</style>    
</head>    
    
<body>    
<div class="align-center">居中div演示效果</div>    
</body>    
</html>    

注意,需要加上上面的那句 
才能生效,要是不想要这句的话,也可以给body加一个属性: 
body{text-align:center;}  
另外,让div内的内容(包括文字及图片)居中的代码是: text-align:center;  

董为坚个人网 https://www.dwjgrw.cn/ 【关闭窗口
注:转载或者复制本站文章,必须带上董为坚个人网链接。
部分文章来源于网络,如有侵权联系删除!
扫一扫在手机阅读

扫一扫 在手机阅读、分享本文


上一篇:守护正直心如明月
下一篇:公园,树林,花草,清纯美女,小清新,意境,

版权所有:《董为坚个人网
本文地址:https://www.dwjgrw.cn/Content/id/351.html   复制地址
本站内容除特别注明外,均为《董为坚个人网》原创,欢迎转载!转载请注明本文地址,谢谢!


  评论列表

暂无评论

  发表评论 [评论会通过邮件和短信的形式通知我,我会及时回复,一定回来看哦!!!]
昵称: [必填]
邮箱: [必填]
内容:

           

[必填]
验证码:   
                     
给我留言 申请友链Copyright © 2012- 董为坚个人网, All rights reserved 手机版
本站已正常运行3522天技术顾问:董为坚个人网 ( 桂ICP备15004478号-1 )
  今日更新:0篇, 最后更新:2023-1-27联系QQ1115030108,邮箱:1115030108@qq.com
今日访问IP:0,访问PV:0请勿发布违反中华人民共和国法律法规的言论.
兔节正气报新春
X关闭
兔随新风辞旧岁
X关闭