设置对齐样式的区别

居中对齐

一般在写静态页面的时候会存在设置居中对齐,会有margin:0 auto;和text-align:center;两种会用到的居中对齐。

区别

  • text-align:center 设置文本或img标签等一些内联对象(或与之类似的元素)的居中。
  • margin:0 auto 设置块元素(或与之类似的元素)的居中。

这里主要是因为对于块元素和行内元素的区别而有了上述两种不同的用法,因此有一些需要注意的:

  • 对于body设置margin:0 auto是无效的,因为body是没有宽度的,除非定义。
  • 设置段落p{text-align:center;} 将要实现的并不是段落本身的对齐方式,而是段落内元素居中对齐。
  • 如果想对img标签设置{margin:0 auto},可以写成{margin:0 auto;display:block;},把img这个行内元素改成块元素。
坚持原创技术分享,您的支持将鼓励我继续创作!