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:
- <div class="Center-Container is-Inline">
- <div class="Center-Block">
- <!-- CONTENT -->
- </div>
- </div>
CSS:
- .Center-Container.is-Inline {
- text-align: center;
- overflow: <span style="width: auto; height: auto; float: none;" id="7_nwp"><a style="text-decoration: none;" mpid="7" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=2d6719abf210fdd5&k=auto&k0=auto&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=d5fd10f2ab19672d&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F3058%2Ehtml&urlid=0" id="7_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">auto</span></a></span>;
- }
- .Center-Container.is-Inline:after,
- .is-Inline .Center-Block {
- display: inline-<span style="width: auto; height: auto; float: none;" id="8_nwp"><a style="text-decoration: none;" mpid="8" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=2d6719abf210fdd5&k=block&k0=block&kdi0=0&luki=7&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=d5fd10f2ab19672d&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F3058%2Ehtml&urlid=0" id="8_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">block</span></a></span>;
- 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之display属性之inline-block布局实现详解
今天学习css样式的时候发现很多网站都是用css的display:inline-block这个属性,这里刚好有篇特别好的解释,特分享一下2020-03-21- 这篇文章主要介绍了详解css中inline-block的最小宽度值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起2019-12-09
- 这篇文章主要介绍了详解CSS 去掉inline-block元素间隙的几种方法,这些间隙会导致一些布局上的问题,需要把间隙去掉。非常具有实用价值,需要的朋友可以参考下2018-11-13
- 这篇文章主要介绍了css几种解决inline-block间隙的方案(整理),具有一定的参考价值,感兴趣的小伙伴们可以参考一下2017-08-16
css解决display:inline-block;产生的缝隙(间隙)的方法
本篇文章主要介绍了css解决display:inline-block;产生的缝隙(间隙)的方法,具有一定的参考价值,有需要的可以了解一下。2016-12-14- 这篇文章主要介绍了兼容浏览器的inline-block,需要的朋友可以参考下2016-02-17
深入解析CSS的display:inline-block属性的使用
这篇文章主要介绍了CSS的display:inline-block属性的使用,其中对使用时产生的空隙问题的解决作了重点讲解,需要的朋友可以参考下2015-11-09- 这篇文章主要介绍了CSS解决inline-block的错位问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-09-01
最新评论