css inline 元素 居中,详解CSS中使用inline-block来进行居中的示例

这篇文章主要详解CSS中使用inline-block来进行居中的示例,使用的时候注意一下容器的宽度,需要的朋友可以参考下

迫切需要的方法：inline-block法居中。基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。

内容区声明的宽度不能大于容器的100% 减去0.25em的宽度。就像一段带有长文本的区域。不然，内容区域会被推到顶端，这就是使用:after伪类的原因。使用:before伪类则会让元素有100%的大小！

如果内容块需要尽可能大地占用水平空间，可以为大容器加上max-width: 99%;样式，或者考虑浏览器和容器宽度的情况下使用max-width: calc(100% – 0.25em) 样式。

这种方法和table-cell的大多数好处相同，不过最初我放弃了这个方法，因为它更像是hack。不管这一点的话，浏览器支持很不错，而且也被证实是很流行的方法。

HTML:

CSS:.Center-Container.is-Inline {

text-align: center;

overflow: auto;

}

.Center-Container.is-Inline:after,

.is-Inline .Center-Block {

display: inline-block;

vertical-align: middle;

}

.Center-Container.is-Inline:after {

content: '';

height: 100%;

margin-left: -0.25em; /* To offset spacing. May vary by font */

}

.is-Inline .Center-Block {

max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */

/* max-width: calc(100% - 0.25em) /* Only for IE9+ */

}

好处：

内容高度可变

内容溢出则能自动撑开父元素高度

浏览器兼容性好，甚至可以调整支持IE7

同时注意：

需要额外容器

依赖于margin-left: -0.25em的样式，做到水平居中，需要为不同的字体大小作调整

内容区声明的宽度不能大于容器的100% 减去0.25em的宽度