详解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的宽度

以上就是详解CSS中使用inline-block来进行居中的示例的详细内容，更多请关注【创想鸟】其它相关文章！