`
a19905522
  • 浏览: 100530 次
  • 性别: Icon_minigender_1
  • 来自: 郑州
社区版块
存档分类
最新评论

宽度高度不固定的div 如何水平居中以及垂直居中

 
阅读更多

点评:从事页面重构以来,由于经常遇见宽度不固定的div在水平或垂直居中的问题!总结下!留着以后用
宽度高度不固定div的水平居中演示如下:

 

水平居中代码:

html部分
<div class="container">
<div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
<div style="clear:both"></div></div>


--------------------------------------------------------------------------------

css部分
.container{width:500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}
.center{display:inline-block;border:2px solid #fff;}
.center{_display:inline;} /*针对ie6 hack*/
.center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration:none;}

 

--------------------------------------------------------------------------------

代码要点:
父容器container加css属性 text-align:center;
子容器center加css属性display:inline-block;
.center{_display:inline;} 为针对ie6的hack

宽度高度不固定的div垂直居中演示如下:

 

垂直居中代码:

html部分
<div id="vc"><div id="vci"><div id="content">
我们垂直居中了,我们水平居中了
</div></div></div>


--------------------------------------------------------------------------------

css部分
#vc { display:table; background-color:#C2300B; width:500px; height:200px; overflow:hidden; margin-left:50px; }
#vci { vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%; }
#content { color:#fff; border:1px solid #fff; display:inline-block; _position:relative; _top:-50%; _left:-50%; }

 

--------------------------------------------------------------------------------

代码要点:
父容器vc的css属性 display:table;overflow:hidden;
子容器vci的css属性 vertical-align:middle;display:table-cell;
针对ie6的hack,vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;
如果不需要水平居中的话,需要注释掉vci容器的text-align:center;_left:50%;以及content的display:inline-block;_left:-50%;

宽度高度固定的div垂直居中和水平居中

 

 

html部分
<div class="guding"><div class="gd">居中了</div></div>


--------------------------------------------------------------------------------

css部分
.guding{width:500px;height:200px;background:#c2300b;margin-left:50px;position:relative;}
.gd{width:50px;height:20px;background:#fff;position:absolute;top:50%;left:50%;margin-top:-10px;margin-left:-25px;}


--------------------------------------------------------------------------------

代码要点
父容器要用相对定位position:relative;否则的话子元素会相对于浏览器窗口进行绝对定位。
子容器绝对定位,top:50%;left:50%;margin-top,margin-left的值取该容器高度,宽度的一半的负值。


--------------------------------------------------------------------------------

如果相对于浏览器窗口做水平垂直居中的话,比如需要大背景居中,代码如下
<style type="text/css">
body{background:#c12b02;}
.main{background:url(你的背景图片地址) no-repeat;width:1000px;height:800px;position:absolute;margin-top:-400px;margin-left:-500px;}
</style>
<body>
<div class="main"></div>
</body>

详细出处参考:http://www.jb51.net/css/56268.html

分享到:
评论

相关推荐

    全国计算机等级考试二级openGauss数据库程序设计样题解析

    主要内容涵盖单选题和操作题两大部分。单选题涉及openGauss数据库的基本概念、数据模型、SQL语法、事务管理和用户权限等方面的知识点。操作题则围绕一个名为bookdb的图书购买信息数据库展开,具体任务包括插入图书信息、更新顾客信息、删除购买记录、查询特定图书信息以及创建视图、存储过程和触发器等实际操作。每道题目均附带详细的解题步骤和最终答案。

    新建 Microsoft Word 文档 (9).docx

    新建 Microsoft Word 文档 (9).docx

    Delphi 12.3控件之nrCommLib Pro v9.54 Full Source for D10.3-D12.7z

    Delphi 12.3控件之nrCommLib Pro v9.54 Full Source for D10.3-D12.7z

    三菱PLC FX5U控制四轴伺服系统:硬件配置、参数设置及运动控制详解

    内容概要:本文详细介绍了使用三菱PLC FX5U控制四轴伺服系统的全过程,涵盖硬件配置、电气接线、参数设置以及运动控制逻辑。硬件方面,选用三菱FX5U-64MT作为主控制器,搭配四个MR-JE-20A伺服驱动器和其他必要组件。软件部分则深入探讨了轴参数初始化、原点回归、多轴联动、HMI界面设计及报警处理等关键技术环节。特别针对旋转轴的特殊处理进行了详细说明,如双速原点回归、绝对定位指令的应用等。此外,还提供了调试经验和优化技巧,确保系统的高精度和平稳运行。 适合人群:从事自动化控制系统设计、调试的技术人员,尤其是对三菱PLC和伺服系统有一定了解的研发人员。 使用场景及目标:适用于工业自动化领域的四轴伺服控制系统开发,旨在帮助工程师掌握从硬件选型到软件编程的一整套解决方案,提高项目的成功率和技术水平。 其他说明:文中附有多份参考资料,包括完整的程序文件、界面工程、CAD接线图和伺服参数清单,便于读者进行实际操作和验证。

    分阶段学习:先掌握基础,再深入细分领域 理论与实践结合:学完算法后立刻用代码实现 保持持续学习:AI技术迭代快,需跟踪最新进展

    分阶段学习:先掌握基础,再深入细分领域。 理论与实践结合:学完算法后立刻用代码实现。 保持持续学习:AI技术迭代快,需跟踪最新进展。

    电子硬件课程设计-Word文档

    电子硬件课程设计

    智慧农贸信息化管理平台.zip

    Java项目基于ssm框架的课程设计,包含LW+ppt

    脚本-压测相关-zyx编写

    脚本-压测相关-zyx编写

    jspm机房预约系统lw+ppt.zip

    Java项目基于ssm框架的课程设计,包含LW+ppt

    app.mobileconfig

    app.mobileconfig

    基于MotorCAD的2极12槽永磁直流有刷电机设计与优化教程

    内容概要:本文详细介绍了使用MotorCAD进行2极12槽永磁直流有刷电机的设计与优化方法。首先,通过Python脚本设置电机的基本参数,如外径、轴向长度、额定转速等。接着,深入探讨了磁钢选型、绕组设置、电磁仿真、热分析等多个关键技术环节。针对常见的设计难题,如齿槽转矩、磁钢充磁方向、绕组跨距等提供了具体的解决方案。同时,还分享了一些提高仿真精度和优化性能的实用技巧,如参数扫描、FEA计算、热管理等。最后,通过实测数据分析验证了设计方案的有效性。 适合人群:电机设计工程师、高校相关专业师生、对电机设计感兴趣的开发者。 使用场景及目标:适用于需要精确设计和优化小型永磁直流有刷电机的场合,帮助用户掌握MotorCAD的具体应用,提高设计效率和产品质量。 其他说明:文中提供的Python和VB脚本示例有助于自动化参数设置和批量处理任务,减少重复劳动。此外,还强调了在设计过程中需要注意的关键技术和常见陷阱,确保设计方案的可行性和可靠性。

    三相逆变器基于PI闭环与解耦控制的MATLAB仿真实现

    内容概要:本文详细介绍了三相逆变器在MATLAB/Simulink环境下的PI闭环控制及解耦控制的实现方法。首先,通过坐标变换将三相电流从静止坐标系转换到旋转坐标系,确保功率守恒并实时更新转子位置角。接着,实现了带有抗饱和处理的PI控制器,防止积分风-up现象。然后,针对d轴和q轴之间的耦合问题,引入了解耦控制,通过低通滤波和交叉耦合项来稳定系统。此外,还讨论了PWM生成模块的死区时间和仿真结果的验证方法,强调了参数调试的重要性和具体策略。 适合人群:电力电子工程师、自动化控制领域的研究人员以及对三相逆变器控制感兴趣的高校师生。 使用场景及目标:适用于需要深入了解三相逆变器控制原理和技术实现的研究项目或工程应用。主要目标是掌握PI控制器的设计、解耦控制的应用及其在MATLAB/Simulink中的仿真实现。 其他说明:文中提供了详细的代码示例和调试技巧,帮助读者更好地理解和实践相关理论。同时提醒读者,仿真成功并不代表实际硬件运行无误,建议在实验过程中准备必要的保护措施。

    58面经面试过程和题目.txt

    58面经面试过程和题目.txt

    OceanBase OBCP 实验指导手册V1.3

    OceanBase OBCP 实验指导手册V1.3

    ABB喷涂机器人IRC5P与PLC Profinet通讯配置及程序号启动详解

    内容概要:本文详细介绍了ABB喷涂机器人IRC5P与PLC通过Profinet通讯进行程序号启动的具体步骤和注意事项。主要内容涵盖Profinet通讯的基本配置,包括设备名称、IP地址设置,RAPID代码编写,任务声明,信号映射,以及调试技巧。文中还分享了许多实际调试中的经验和常见错误,如大小写敏感、IP地址分配、程序号有效性和信号防抖处理等。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是负责机器人与PLC通讯配置的技术人员。 使用场景及目标:帮助技术人员正确配置ABB喷涂机器人IRC5P与PLC之间的Profinet通讯,确保程序号能够顺利启动,避免常见的配置错误和调试难题。 其他说明:文章强调了硬件和软件配置相结合的重要性,并提供了详细的代码示例和调试建议,有助于提高系统的稳定性和可靠性。

    电子硬件课后习题题目及要求.docx

    电子硬件课后习题题目及要求.docx

    亲测开源好用的红盟云发卡源码对接支付宝等支持一件搭建

    亲测开源好用的红盟云发卡源码对接支付宝等支持一件搭建,方便建立自己的发卡平台,源码全部开源无加密,可方便而开使用。 测试环境:php7.2+mysql+宝塔面板 安装教程: ①设置public运行目录 ②设置thinkphp伪静态 ③访问域名填写数据库信息根据提示安装

    Delphi 12.3控件之MiTeC-System-Information-Component-Suite-15.1.0-Full-Source.7z

    Delphi 12.3控件之MiTeC_System_Information_Component_Suite_15.1.0_Full_Source.7z

    Delphi 12.3控件之StyleControls 5.80.7z

    Delphi 12.3控件之StyleControls 5.80.7z

    工业自动化中YASKAWA输送带同步系统YRC1000的应用与优化

    内容概要:本文详细介绍了YASKAWA公司生产的输送带同步系统YRC1000的工作原理、应用场景及其优缺点。文中不仅解释了YRC1000通过精确控制各输送带电机的转速和位置来实现同步的方法,还展示了Python和C++两种编程语言下的模拟代码片段,帮助理解同步控制的具体实现方式。此外,文章深入探讨了YRC1000在实际应用中的优势,如高同步精度、良好的稳定性和强大的技术支持,同时也指出了其较高的成本和技术门槛。为了提高系统的可靠性和性能,作者分享了一些实用技巧,包括正确的硬件连接、合理的参数设置以及有效的故障排查方法。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是那些负责生产线设计、维护和优化的专业人士。 使用场景及目标:适用于需要确保多个输送带之间保持高度一致性的场合,如电子产品组装车间、汽车制造工厂等。主要目的是提升生产效率,减少因同步问题导致的质量缺陷或停工现象。 其他说明:尽管YRC1000具有出色的性能表现,但在实际部署过程中仍需注意成本控制和技术细节的把握。文中提供的经验和建议有助于降低实施难度并提高成功率。

Global site tag (gtag.js) - Google Analytics