首页 > 开发 > CSS > 正文

CSS水平居中总结(新手必看篇)

2024-07-11 08:32:30
字体:
来源:转载
供稿:网友

行内元素

如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:center 来实现的。

html代码:

XML/HTML Code复制内容到剪贴板
  1. <body>       
  2. <div class="txtCenter">我想要在父容器中水平居中显示。</div>       
  3. </body>  

css代码:

CSS Code复制内容到剪贴板
  1. <style>        
  2. .txtCenter{      
  3.     text-align:center;        
  4. }       
  5. </style>  

块状元素

定宽块状元素

定宽块状元素:块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

html代码:

XML/HTML Code复制内容到剪贴板
  1. <body>        
  2. <div>我是定宽块状元素,哈哈,我要水平居中显示。</div>       
  3. </body>  

css代码:

CSS Code复制内容到剪贴板
  1. <style>       
  2. div{          
  3.     border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/              
  4.     width:200px;/*定宽*/          
  5.     margin:20px auto;/* margin-left 与 margin-right 设置为 auto */       
  6. }       
  7.  </style>  

也可以写成:

CSS Code复制内容到剪贴板
  1. margin-left:auto;       
  2. margin-right:auto;  

注意:元素的“上下 margin” 是可以随意设置的。

不定宽块状元素

1. 加入 table 标签

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表