香港高速VIP云机房火爆上线啦!无需备案,开通即用!配套《巅云自助建站系统3.0》将带给您飞一般的可视化拖拽建站体验,欢迎免费体验。

建站专题

CSS在固定宽高的div内实现垂直居中的实例详解

一佰互联网站开发设计(www.yinxi.net) 发布日期 2019-04-21 17:23:37 浏览数: 24

需求案例

案例是这样的,一个外层div,高宽是固定的,但是里面内容不是固定的。很多朋友的做法是头部加一个padding或者margin,这样,里面内容显得貌似是居中了,但是假如内容变化,这样头部的固定padding或者margin,始终不变。造成了垂直方向不会居中!

我们知道,假如下面一个div

CSS Code复制内容到剪贴板
  1. <div class="outer"><div class="inner">haorooms内部内容</div></div>  

样式是这样的

CSS Code复制内容到剪贴板
  1. .outer{text-align:center;vertical-alignmiddle;width:200px;height:350px;}  

vertical-align:middle是不管用的,很多朋友就在.inner上面做文章了,和我上面说的,加margin等等!那对于这种情况,有没有更好的解决方案呢?

解决方法

思路:加一个cssHack,设置cssHack的line-height等于外层div的高度,就可以使用vertical-align:middle了!

div如下:

CSS Code复制内容到剪贴板
  1. <div class="outer">   
  2.     <div class="inner">haorooms内部内容</div><div class="v">cssHack</div>   
  3. </div>  

样式如下:

CSS Code复制内容到剪贴板
  1. * {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  5. .outer {   
  6.     background-color#ccc;   
  7.     font-size24px;   
  8.     height350px;   
  9.     text-aligncenter;   
  10.     overflowhidden;   
  11.     width280px;   
  12. }   
  13. .outer  .inner,   
  14. .outer  .v {   
  15.     displayinline-block;   
  16.     zoom: 1;*displayinline/* 用于触发支持IE67 inline-block */  
  17. }   
  18. .outer  .inner {               
  19.     line-height: 1.8;   
  20.     padding: 0 4px 0 5px;   
  21.     vertical-alignmiddle;   
  22.     width262px;              
  23. }   
  24. .outer  .v {   
  25.     line-height350px;   
  26.     text-indent:-9999px;   
  27.     width1px;            
  28. }  

这样就实现了div内部的垂直居中了!

一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

22
11月
整理:网站搜索排名提高的方法

关键词选择技巧关键词不是仅限于单个的词,还应包括词组和短语。我们知道,在搜索引擎中检索信息都是通过输入关键词来实现的。因此正如其名所示,关键... >>详情

26
03月
微交互:超实用的提高产品魅力值神器

简介:微交互可以说是吸引用户、提升产品体验感的一个极好的方式,如何利用好这点呢?什么是微交互?微交互是指具有一项主要任务或者说一个目标的事件... >>详情

13
03月
选择美国虚拟主机最值得关注的四点

美国虚拟主机是做英文网站不可缺少的必备设施之一,因为中国出口宽带不足,导致同国外的互联情况不稳定,所以国外虚拟主机就成为了建立英文网站必不可... >>详情

18
05月
网站权重是网站优化的根本_巅云建站

从最初涉足到现在,有六个年头了,虽然现在早已不是单纯的做的工作了,不过这些年在seo方面的一些积累和经验相信对现在正在从事SEO工作的朋友会... >>详情

营业执照. cdn加速服务 备案系统认证 网络安全协会 我们的支付方式AAA认证
上海 北京 深圳 广州 天津 杭州 南京 武汉 成都 沈阳 大连 长沙 济南 青岛 苏州 福州 无锡 哈尔滨 宁波 重庆 大庆 厦门 西安 长春 珠海 郑州 海口 昆明 太原 石家庄 温州 合肥 乌鲁木齐 南宁 南通 合肥 兰州 呼和浩特 贵阳 烟台 秦皇岛 包头 唐山 银川 汕头 连云港 威海 西宁 湛江 北海 万州 涪陵 长寿 黔江 永川 丰都 忠县 江津 南川 开县 云阳 万盛 梁平 垫江 巫山 城口 建站宝盒 免费建站 门户网站建设 微信网站 手机网站 门户网站制作

7x24小时服务电话:18581389571 传真:023-85725751 免费建站交流群:236412099 139947842(自助建站交流) E-Mail:post@yinxi.net 网站投诉:
重庆楚捷科技有限公司 一佰互联©版权所有 自助建站(www.yinxi.net,Inc.) 2001-2020 All Rights Reserved 本站程序受法律保护,网站法律顾问:ITLAW-庄毅雄律师
中华人民共和国信息产业部网站备案号:渝ICP备12000592号