CSS 居中?来一探究竟

我就是停不下来 2019-10-28

我的博客原文:https://wzb.me/posts/2019/10/28/css-centering.html

「居中」是进行布局时最常见的需求之一了。CSS 有多种居中的方式,在什么时候挑选适合的方案?是一个值得思考的问题。

法律声明

警告:本作品遵循 署名-非商业性使用-禁止演绎 4.0 未本地化版本(CC BY-NC-ND 4.0) 协议发布。你应该明白与本文有关的一切行为都应该遵循此协议。

这是什么?

写在前面

本文将会按照具体场景来选择相应的居中方式,帮助你系统地理清 CSS 居中。

注意:为了简洁,文中给出的 CSS 代码只会给出关键的定义布局的代码。

在水平方向上的居中(Horizontally Centering)

对于行内(inline / inline-* )元素

要将行内元素居中,只需要给其父块级元素(block-level parent element)定义以下 CSS 规则:

.block-level-parent-of-inline-element {
  text-align: center;
}

CSS 居中?来一探究竟

这对 inline inline-block inline-table inline-flex etc. 都生效

text-align 不仅仅是针对于 text 的对齐描述,实际上,它影响的是块级元素下的行内元素与文本(inline contents)。

参考:text-align - CSS | MDN

对于块级元素(block element)

要将块级元素居中,给其定宽(width)之后定义以下 CSS 规则

.block-element {
  margin: 0 auto;
}

CSS 居中?来一探究竟

如果没有给定块级元素宽度?那它会充满整行,以至于不需要居中了...

相关推荐

aSuncat / 0评论 2020-08-18