如何居中inline-block元素？CSS/HTML布局问题求助

嘿，我来帮你解决这个inline-block元素的居中问题！你说设置margin-top只让图片偏移，这是因为inline-block元素默认是基线对齐的，而且居中得从父容器和元素本身两方面入手调整，咱们一步步来：

一、水平居中最简单的方法 #

因为inline-block元素兼具行内元素的特性，所以直接给它的父容器（也就是你的#img-banner）加一行CSS就行：

#img-banner {
  text-align: center;
}

这样里面的article元素就会像文字一样，自动在父容器里水平居中啦。

二、垂直居中的解决方案（解决你margin-top没用的问题） #

你遇到的margin-top失效问题，核心是inline-block默认的vertical-align: baseline（基线对齐）在搞鬼，试试下面两种方法：

方法1：利用line-height + vertical-align #

如果你的#img-banner有固定高度，比如假设它的高度是18em，那么：

#img-banner {
  text-align: center; /* 先保证水平居中 */
  line-height: 18em; /* 把行高设成和父容器高度一致 */
}

#img-banner article {
  border: solid thick white;
  box-sizing: border-box;
  display: inline-block;
  width: 14em;
  position: static;
  vertical-align: middle; /* 让元素和父容器的中线对齐 */
}

这样就能实现垂直居中，而且不会出现图片偏移的问题。

方法2：用Flex布局（更灵活，推荐新手学） #

Flex布局是现在主流的布局方式，不管父容器有没有固定高度，都能轻松实现居中：

#img-banner {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  min-height: 18em; /* 可以根据你的图片实际高度调整，或者设为100%占满父容器 */
}

#img-banner article {
  border: solid thick white;
  box-sizing: border-box;
  display: inline-block; /* 其实Flex子元素可以不用这个属性，不过保留也不影响 */
  width: 14em;
  position: static;
}

这种方法不用管基线对齐的规则，逻辑更直观，适合刚学CSS的同学理解。

顺便给你讲讲inline-block的定位特性 #

inline-block是个很实用的属性，它的特性总结起来就是：

• 像块级元素一样，可以设置宽高、边框、内外边距；
• 像行内元素一样，会和其他行内/inline-block元素排在同一行；
• 默认垂直对齐方式是基线对齐，这就是为什么你单独调margin-top会出现奇怪偏移的原因；
• 它的横向/纵向margin都不会像块级元素那样合并，设置多少就是多少。

内容的提问来源于stack exchange，提问作者Jose Chavez