CSS单行内容居中实现及优缺点

本文向大家描述一下如何实现要实现CSS单行内容居中,只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置line-height和height,并使两值相等,再加上over-flow:hidden就可以了。

CSS实现完美垂直居中

要实现CSS单行内容居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和table布局一样。不过最近有人问了几个例子,看来对此的需求还不少。

首先,要有一个概念:凡是table布局可以实现的,CSS一定可以实现。CSS可以实现的,table未必能做到。

CSS单行内容居中

只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置line-height和height,并使两值相等,再加上over-flow:hidden就可以了。

viewplaincopytoclipboardprint?

 
 
 
  1. .middle-demo-1{  
  2. height:4em;  
  3. line-height:4em;  
  4. overflow:hidden;  
  5. }  
  6. .middle-demo-1{  
  7. height:4em;  
  8. line-height:4em;  
  9. overflow:hidden;  
  10. }  
  11.  

 CSS单行内容居中优点:

1.同时支持块级和内联极元素

2.支持所有浏览器

CSS单行内容居中缺点:

1.只能显示一行

2.IE中不支持等的居中

要注意的是:1.使用相对高度定义你的height和line-height2.不想毁了你的布局的话,overflow:hidden一定要。

为什么?请比较以下两个例子:

viewplaincopytoclipboardprint?

 
 
 
  1. font:bold12px/24pxHelvertica,Arial,  
  2. sans-serif;height:24px;width:370px;"> 
  3. Loremipsumdolorsitamet,consectetueradipiscingelit.

     

  4.  

  5.  
  6. font:bold12px/2emHelvertica,Arial,sans-serif;  
  7. height:2em;width:370px;overflow:hidden;"> 
  8. Loremipsumdolorsitamet,consectetueradipiscingelit.

     
  9. font:bold12px/24pxHelvertica,Arial,sans-serif;  
  10. height:24px;width:370px;"> 
  11. Loremipsumdolorsitamet,consectetueradipiscingelit.

     

  12.  

  13.  
  14. font:bold12px/2emHelvertica,Arial,sans-serif;  
  15. height:2em;width:370px;overflow:hidden;"> 
  16. Loremipsumdolorsitamet,consectetueradipiscingelit.

     
  17.  

 上一个高度是用的绝对单位px,并且没有隐藏溢出,下一个高度用的单位是相对单位em,并且隐藏了溢出。如果你的浏览器支持放大字体,那么尽情地放大字体,看看会出现什么效果。

网站栏目:CSS单行内容居中实现及优缺点
当前路径:http://www.shufengxianlan.com/qtweb/news21/323821.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联