• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

CSS文字居中和盒子居中

开发技术 开发技术 1周前 (07-21) 7次浏览

1.块级盒子居中

  • 可以让一个块级盒子实现水平居中必须:
    • 盒子必须指定了宽度(width)
    • 然后就给左右的外边距都设置为auto

实际工作中常用这种方式进行网页布局,示例代码如下:

.header{ width:960px; margin:0 auto;}

常见的写法,以下下三种都可以。

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

2.文字居中和盒子居中的区别

  1. 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
  2. 块级盒子水平居中 左右margin 改为 auto
    text-align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

程序员灯塔
转载请注明原文链接:CSS文字居中和盒子居中
喜欢 (0)