本文向大家描述一下如何实现要实现CSS单行内容居中,只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置line-height和height,并使两值相等,再加上over-flow:hidden就可以了。
CSS实现完美垂直居中
要实现CSS单行内容居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和table布局一样。不过最近有人问了几个例子,看来对此的需求还不少。
首先,要有一个概念:凡是table布局可以实现的,CSS一定可以实现。CSS可以实现的,table未必能做到。
CSS单行内容居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置line-height和height,并使两值相等,再加上over-flow:hidden就可以了。
viewplaincopytoclipboardprint?
- .middle-demo-1{
- height:4em;
- line-height:4em;
- overflow:hidden;
- }
- .middle-demo-1{
- height:4em;
- line-height:4em;
- overflow:hidden;
- }
CSS单行内容居中优点:
1.同时支持块级和内联极元素
2.支持所有浏览器
CSS单行内容居中缺点:
1.只能显示一行
2.IE中不支持等的居中
要注意的是:1.使用相对高度定义你的height和line-height2.不想毁了你的布局的话,overflow:hidden一定要。
为什么?请比较以下两个例子:
viewplaincopytoclipboardprint?
- font:bold12px/24pxHelvertica,Arial,
- sans-serif;height:24px;width:370px;">
- Loremipsumdolorsitamet,consectetueradipiscingelit.
- font:bold12px/2emHelvertica,Arial,sans-serif;
- height:2em;width:370px;overflow:hidden;">
- Loremipsumdolorsitamet,consectetueradipiscingelit.
- font:bold12px/24pxHelvertica,Arial,sans-serif;
- height:24px;width:370px;">
- Loremipsumdolorsitamet,consectetueradipiscingelit.
- font:bold12px/2emHelvertica,Arial,sans-serif;
- height:2em;width:370px;overflow:hidden;">
- Loremipsumdolorsitamet,consectetueradipiscingelit.
上一个高度是用的绝对单位px,并且没有隐藏溢出,下一个高度用的单位是相对单位em,并且隐藏了溢出。如果你的浏览器支持放大字体,那么尽情地放大字体,看看会出现什么效果。
网站栏目:CSS单行内容居中实现及优缺点
当前路径:http://www.shufengxianlan.com/qtweb/news21/323821.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联