古老的center标签已经废弃了,css的text-align取代了它。
一、text-align 可以使行内元素居中,也可以使块级元素中的文本居中
如下代码
<div style="width:400px;border:1px solid gray;padding:5px;text-align:center;"> <span style="background:yellow;">使用text-align使行内元素span居中</span> </div> <br> <div style="width:400px;border:1px solid gray;padding:5px;text-align:center;"> <p style="background:red;">使用text-align使行内元素span居中</p> </div>
效果如图
可见:第一个text-align使得文本和SPAN都居中,第二个text-align则只能使文本居中,块级元素P则没有居中。关于text-align的演变及浏览器兼容性参考 RT8003。
二、margin 自动空白边仅能使块级元素居中
如下代码
<div style="width:400px;border:1px solid gray;padding:5px;"> <span style="background:yellow;width:220px;margin:0 auto">使用margin:auto不能使行内元素居中</span> </div> <br> <div style="width:400px;border:1px solid gray;padding:5px;"> <p style="background:red;width:220px;margin:0 auto">使用margin:auto使块级元素居中</p> </div>
效果如图:
可见:自动空白边并不能使行内元素SPAN(inline-block也不能)居中,但可以使得块级元素P居中。
三、绝对定位居中(position, left, right)
代码如下
<div style="width:400px;height:50px;border:1px solid gray;position:relative;"> <span style="background:yellow;position:absolute;left:60px;right:60px;">使用绝对定位居中行内元素</span> </div> <br> <div style="width:400px;height:50px;border:1px solid gray;position:relative;"> <p style="background:red;position:absolute;left:50px;right:50px;">使用绝对定位方式居中块级元素</p> </div>
效果如图
父元素使用relative,子元素SPAN和P绝对定位后无需设置width,它会根据left,right值自动计算元素的宽度。这种居中方式很有意思,也很实用。可惜IE6不能正确解析,它忽略了right的值。因此在IE6退出历史舞台前还得放弃这种居中方式。
相关推荐
此插件可在Genesis Framework中使用,以新颖有趣的方式显示特色图像。 它可以与HTML5或XHTML主题一起使用,但是较旧的主题可能在元素上设置了宽度,可能无法实现完整的横幅广告体验。 描述 该插件采用了不同的方法来...
运用到相应文字居中的一些设定和字体的大小颜色和背景的颜色以及背景和块的功能以及两者间互相配合使用,“恶棍天使”那一行里面就是在一块“行”上面重新定义了“区域块”和“行块”等•。 通过今天的学习制作简单...
ERP在特定的物料管理和财务功能的答案是支持度居中。 系统在支持客户反应和人事管理方面的得分相当低(虽然在瑞典调查的结果中,支持客户反应一项的得分非常接近中立)。 两项调查都发现,“ERP系统能够节约信息技术...
有趣的编程 在此存储库中,您可以找到: 为视频教程编写的: 我的创意编码实验:。 这些不是完成的工作,而是我在开发项目时所做的测试或出于乐趣和好奇心而进行的实验。 索引如下。 您可以在和查看一些结果 这里...
应该很有趣。 目标是使用开发工具复制网站,并学习以下内容。 在页面上移动div的两种方法。 将div粘贴到页面底部或顶部。 识别现有网页的背景色。 从现有网页中获取图像的URL 将元素水平居中。 确定在页面中包含CSS...
以完全不同的方式和更有趣的方式替换恼人的背景。 下载以Dota 2为主题的扩展程序,并在每次打开新选项卡时欣赏照片。 对于您来说,我们已经保存了高质量的高清分辨率图片和许多其他功能,这些功能将使搜索引擎的使用...
您会得到什么:-带有问候语的居中个性化时钟-居中搜索栏-带有扩展和检查五天选项的天气小部件-热门网站的链接和快捷方式-强大而强大的待办事项组织者-带有“我的最爱”设置的“选项”标签墙纸,时钟,搜索服务提供商...
特点-时钟居中(12h / 24h选项),带有个性化问候语供您选择(例如昵称)-出色的工作清单,以便您可以跟踪重要内容-快捷网站的快捷方式(单击左上角的“链接”图标) 。 -每日行情–每天都会为您和您的动机选择有力...
Ag是一种快速且友好的字谜生成器,可轻松找到*有趣的*字谜。
费尔菲尔德学院预科学校网站开发-Mesquita先生硬件8-1到期日为4... CSS 使用内部样式表,对您在上面创建的元素进行以下样式更改: 设置主标题的样式,以便: 文本居中对齐。 (1点) 背景颜色为红色。 (1点) 文字颜色
jQuery-Flex-Vertical-Center用于垂直居中放置内容 ,可获取位于视频文件夹中的免费webM视频片段 ### Fork me您可以重用,启发或重建所有此项目。 为了更加有趣,所有这些都可以在js/ho-my-timer.js文件中进行配置...
特点-时钟居中(12h / 24h选项),带有个性化问候语供您选择(例如昵称)-出色的工作清单,以便您可以跟踪重要内容-快捷网站的快捷方式(单击左上角的“链接”图标) 。 -每日行情–每天都会为您和您的动机选择有力...
特点-时钟居中(12h / 24h选项),带有个性化问候语供您选择(例如昵称)-出色的工作清单,以便您可以跟踪重要内容-快捷网站的快捷方式(单击左上角的“链接”图标) 。 -每日行情–每天都会为您和您的动机选择有力...
将段落齐左, 居中或齐右排列. 建立无序清单或排序清单 段落缩排或取消缩排. 插入水平线. 插入超连结及图片. 检视所编辑的原始 HTML 源码. 还有更多... 以下列出一些 HTMLArea 格外有趣的特色, 这些...
特点-时钟居中(12h / 24h选项),带有个性化问候语供您选择(例如昵称)-出色的工作清单,以便您可以跟踪重要内容-快捷网站的快捷方式(单击左上角的“链接”图标) 。 -每日行情–每天都会为您和您的动机选择有力...
特点-时钟居中(12h / 24h选项),带有个性化问候语供您选择(例如昵称)-出色的工作清单,以便您可以跟踪重要内容-快捷网站的快捷方式(单击左上角的“链接”图标) 。 -每日行情–每天都会为您和您的动机选择有力...
图像特效:内建20多种图像特效,快速实现各种有趣的图像效果:锐化、模糊、抽丝、怀旧照片、浮雕/雕刻等; 字符素描:羡慕论坛大虾的超酷字符签名吧,有了iSee您就可以梦想成真了! Flash播放:内置Flash动画播放...
总的来说,这是一个非常有趣的时间,我绝对需要在我的 MENTAl 造型上工作,因为它真的不是那么漂亮,我可以让它看起来更好。 绝对是我将来会做的事情,因为我希望它成为我可以将人们联系起来的东西。
特点-时钟居中(12h / 24h选项),带有个性化问候语供您选择(例如昵称)-出色的工作清单,以便您可以跟踪重要内容-快捷网站的快捷方式(单击左上角的“链接”图标) 。 -每日行情–每天都会为您和您的动机选择有力...
装饰它 ...请遵循 任务 ... 更改style.css以便页面按如下所述工作: 该页面由页眉,页脚和它们之间的9个块组成。 块的宽度必须为300px。 每个块(包括页眉和页脚)的高度必须为100px... 放置块,使它们在页面上水平居中。