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

建站专题

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

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

需求案例

案例是这样的,一个外层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

28
03月
永信至诚蔡晶晶:网络安全意识已成生活技能、生

简介:如今,互联网不仅将虚拟与现实紧密链接,更对政治、经济、文化、社会、军事等产生深刻影响,网络安全也牵一发而动全身,成为信息时代国家安全的... >>详情

04
03月
连任何销售员都特别注重的一项技能

任何公司的销售人员当接下业务后心情是特别愉快得无法形容的,当然网站销售人员也不例外,网站销售员风风火火的拿下订单,并交给建设团队完成,那团... >>详情

28
04月
php实现获取文件mime类型的方法

本文实例讲述了php获取文件mime类型的方法。分享给大家供大家参考。具体如下:1.使用 mime_content_type 方法strin... >>详情

29
04月
php读取文件内容的三种可行方法示例介绍

php读取文件内容的三种方法: //**************第一种读取方式***************************** 复... >>详情

营业执照. 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号