正确的使用margin:0 auto与body{text-align:center;}实现元素居中
body{text-align:center}与margin:0 auto的异同?
text-align是用于设置或对象中文本的对齐方式。一般情况下我们设置文本对齐方式的时候需要用此属性进行设置
我们设置某个对象水平方向居中的时候,常常将左右的外边距设置为auto来实现
text-align:center设置为文本或img标签等一些内联对象(或与之类似的元素)的居中。margin:0 auto是设置块元素(或与之类似的元素)的居中。但这两个属性IE与FF的理解也有所不同。
我们设置一个段落P,在段落内存在一个图片img标签。
我们设置body{text-align:center;},在IE中,段落P,图片img同时实现了居中对齐,也就是说text-align:center;同时作用于元素p与元素img。
在FF中,段落P,没有能实现居中对齐,而图片img实现了居中对齐,也就是说text-align:center;作用于img标签,而段落p标签没有起到居中的作用。
我们设置段落 p {margin:0 auto;}。我们发现在IE与FF中,段落P均实现了居中对齐。图片img由于不是作用对象,所以不会居中对齐。
有三种情况需要说明:
一、有朋友在操作的时候,将margin:0 auto;的选择器混淆了,应该是作用对象,如div,p,而不是body。如果设置:body { margin:0 auto; }将不会达到任何效果,除非你定义body的宽度,那将会让body内的元素产生位置变化。如我们设置body宽度为500px。对p段落不作任何设置,我们最大化窗口将会看到段落并非处于窗口的最左上角。
二,我们设置段落 p {text-align:center;} 将要实现的并不是段落本身的对齐方式,而是段落内元素居中对齐。
三,我们设置图片标签img {margin:0 auto;} ,我们就犯了一个小错误,img类于内联对象,不可以设置图片img标签的margin属性,如果你一定想要设置,那么首先要将它的属性转变为块元素,如下面的代码:img {display:block; margin:0 auto;}
如果页面中的元素,均位于div标签或其它块元素内,进行了合理的嵌套,我们不必设置body{text-align:center}。只需要设置相应的div元素margin:0 auto;即可。如上面的代码所讲述,页面中的元素均位于段落p标签中,只需要将段落居中即可。
如果页面中的元素,有一部分不是在div标签或其它块元素内,我们需要设置body{text-align:center}。但也会遇到问题,这样设置以后,大部分内联元素,都居中对齐了,包括页面中其它的一些文本,还需要进行相应的调整才能适应设计的需要。如:我们设置body内有一个段落P,在段落内有一个图片img及一段文本,在body内还存在一个独立的图片img。
我们实现了段落p的居中,同时也让位于段落外的图片实现了居中,但段落中的图片与文本居中对齐了。
比如代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.51qqdm.cn</title>
<style type="text/css">
body {
text-align:center;
}
p {
margin:0 auto;
width:300px;
background:#06f;
}
img {
}
</style>
</head>
<body>
<p>
<img src="http://www.51qqdm.cn/imges/logo.gif" alt="51qqdm.cn - CSS Web Design" width="200" height="90" style="vertical-align:top;" />
<br />
一个专业的CSS学习站点,内容丰富并且保持每天更新,我们建立了很多Q群供网友们互动讨论学习,学习开发符合WEB标准的网页及网站重构。
</p>
<br />
<img src="http://www.51qqdm.cn/imges/logo.gif" alt="51qqdm.cn- CSS Web Design" width="200" height="90" style="vertical-align:top;" />
</body>
</html>
摘自:
http://blog.csdn.net/chinmo/article/details/2157998
分享到:
相关推荐
内容概要:本文详细介绍了基于MATLAB GUI界面和卷积神经网络(CNN)的模糊车牌识别系统。该系统旨在解决现实中车牌因模糊不清导致识别困难的问题。文中阐述了整个流程的关键步骤,包括图像的模糊还原、灰度化、阈值化、边缘检测、孔洞填充、形态学操作、滤波操作、车牌定位、字符分割以及最终的字符识别。通过使用维纳滤波或最小二乘法约束滤波进行模糊还原,再利用CNN的强大特征提取能力完成字符分类。此外,还特别强调了MATLAB GUI界面的设计,使得用户能直观便捷地操作整个系统。 适合人群:对图像处理和深度学习感兴趣的科研人员、高校学生及从事相关领域的工程师。 使用场景及目标:适用于交通管理、智能停车场等领域,用于提升车牌识别的准确性和效率,特别是在面对模糊车牌时的表现。 其他说明:文中提供了部分关键代码片段作为参考,并对实验结果进行了详细的分析,展示了系统在不同环境下的表现情况及其潜在的应用前景。
嵌入式八股文面试题库资料知识宝典-计算机专业试题.zip
嵌入式八股文面试题库资料知识宝典-C and C++ normal interview_3.zip
内容概要:本文深入探讨了一款额定功率为4kW的开关磁阻电机,详细介绍了其性能参数如额定功率、转速、效率、输出转矩和脉动率等。同时,文章还展示了利用RMxprt、Maxwell 2D和3D模型对该电机进行仿真的方法和技术,通过外电路分析进一步研究其电气性能和动态响应特性。最后,文章提供了基于RMxprt模型的MATLAB仿真代码示例,帮助读者理解电机的工作原理及其性能特点。 适合人群:从事电机设计、工业自动化领域的工程师和技术人员,尤其是对开关磁阻电机感兴趣的科研工作者。 使用场景及目标:适用于希望深入了解开关磁阻电机特性和建模技术的研究人员,在新产品开发或现有产品改进时作为参考资料。 其他说明:文中提供的代码示例仅用于演示目的,实际操作时需根据所用软件的具体情况进行适当修改。
少儿编程scratch项目源代码文件案例素材-剑客冲刺.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 转瞬即逝.zip
内容概要:本文详细介绍了基于PID控制器的四象限直流电机速度驱动控制系统仿真模型及其永磁直流电机(PMDC)转速控制模型。首先阐述了PID控制器的工作原理,即通过对系统误差的比例、积分和微分运算来调整电机的驱动信号,从而实现转速的精确控制。接着讨论了如何利用PID控制器使有刷PMDC电机在四个象限中精确跟踪参考速度,并展示了仿真模型在应对快速负载扰动时的有效性和稳定性。最后,提供了Simulink仿真模型和详细的Word模型说明文档,帮助读者理解和调整PID控制器参数,以达到最佳控制效果。 适合人群:从事电力电子与电机控制领域的研究人员和技术人员,尤其是对四象限直流电机速度驱动控制系统感兴趣的读者。 使用场景及目标:适用于需要深入了解和掌握四象限直流电机速度驱动控制系统设计与实现的研究人员和技术人员。目标是在实际项目中能够运用PID控制器实现电机转速的精确控制,并提高系统的稳定性和抗干扰能力。 其他说明:文中引用了多篇相关领域的权威文献,确保了理论依据的可靠性和实用性。此外,提供的Simulink模型和Word文档有助于读者更好地理解和实践所介绍的内容。
嵌入式八股文面试题库资料知识宝典-2013年海康威视校园招聘嵌入式开发笔试题.zip
少儿编程scratch项目源代码文件案例素材-驾驶通关.zip
小区开放对周边道路通行能力影响的研究.pdf
内容概要:本文探讨了冷链物流车辆路径优化问题,特别是如何通过NSGA-2遗传算法和软硬时间窗策略来实现高效、环保和高客户满意度的路径规划。文中介绍了冷链物流的特点及其重要性,提出了软时间窗概念,允许一定的配送时间弹性,同时考虑碳排放成本,以达到绿色物流的目的。此外,还讨论了如何将客户满意度作为路径优化的重要评价标准之一。最后,通过一段简化的Python代码展示了遗传算法的应用。 适合人群:从事物流管理、冷链物流运营的专业人士,以及对遗传算法和路径优化感兴趣的科研人员和技术开发者。 使用场景及目标:适用于冷链物流企业,旨在优化配送路线,降低运营成本,减少碳排放,提升客户满意度。目标是帮助企业实现绿色、高效的物流配送系统。 其他说明:文中提供的代码仅为示意,实际应用需根据具体情况调整参数设置和模型构建。
少儿编程scratch项目源代码文件案例素材-恐怖矿井.zip
内容概要:本文详细介绍了基于STM32F030的无刷电机控制方案,重点在于高压FOC(磁场定向控制)技术和滑膜无感FOC的应用。该方案实现了过载、过欠压、堵转等多种保护机制,并提供了完整的源码、原理图和PCB设计。文中展示了关键代码片段,如滑膜观测器和电流环处理,以及保护机制的具体实现方法。此外,还提到了方案的移植要点和实际测试效果,确保系统的稳定性和高效性。 适合人群:嵌入式系统开发者、电机控制系统工程师、硬件工程师。 使用场景及目标:适用于需要高性能无刷电机控制的应用场景,如工业自动化设备、无人机、电动工具等。目标是提供一种成熟的、经过验证的无刷电机控制方案,帮助开发者快速实现并优化电机控制性能。 其他说明:提供的资料包括详细的原理图、PCB设计文件、源码及测试视频,方便开发者进行学习和应用。
基于有限体积法Godunov格式的管道泄漏检测模型研究.pdf
嵌入式八股文面试题库资料知识宝典-CC++笔试题-深圳有为(2019.2.28)1.zip
少儿编程scratch项目源代码文件案例素材-几何冲刺 V1.5.zip
Android系统开发_Linux内核配置_USB-HID设备模拟_通过root权限将Android设备转换为全功能USB键盘的项目实现_该项目需要内核支持configFS文件系统
C# WPF - LiveCharts Project
少儿编程scratch项目源代码文件案例素材-恐怖叉子 动画.zip
嵌入式八股文面试题库资料知识宝典-嵌⼊式⼯程师⾯试⾼频问题.zip