CSS3

内容居中

行内元素,行内块状元素居中显示

text-align: center;

text-align 只对 inline,inline-block 元素有效果,对 block 元素无效果。

行内元素特点

  1. 与其他行内元素共享1行
  2. 默认高度和宽度都是由内容决定,即auto
  3. 设置width,height无效,不起作用
  4. display: inline
  5. 常见行内元素:span,a,文本标记元素全是

inline-block 元素(独占一行,也可以不独占一行):p,img

块状元素居中显示

  1. 既有行内元素共用1行的特点又有块状元素可以设置宽,高的特点
  2. 块状元素转成行内块状元素,使其1行排列,display: inline-block
  3. 常见行内块状元素:img,input
margin: 0 auto;

块状元素特点

  1. 独占1行
  2. 默认宽度是100%,默认高度auto
  3. 设置width,height有效
  4. display: block
  5. 常见块状元素:h1~h6,div,p,ul,li
posted @ 2023-03-12 13:06  沙里  阅读(22)  评论(0)    收藏  举报