Ap标签居中为什么能居中

本帖子已过去太久远了,不再提供回复功能。HTML &a&标签中的文字要怎么居中对齐?
HTML&a&标签居中对齐的代码是什么?
一、块元素中的&a&标签居中对齐 ——块元素中的&a&标签如:&&p&&a href=&#&&文字&/a&&/p&&
可以给这个&p&标签加上样式代码&p style=&text-align: center&&&a href=&#&&文字&/a&&/p&
实现垂直居中对齐
代码示例:
html 代码效果预览&p style=&text-align: center&&&a href=&&&W3Cschool&/a&&/p&
二、单独的&a&标签
如果这个是单独的话,就先把这个&a&标签变成块元素然后添加一个宽度,再让它文字居中 &a href=&#& style=&display:inline- width:100 text-align:center&&文字&/a&例如代码示例
html 代码效果预览学技术从&a href=&& style=&display:inline- width:110 text-align:center&&&/a&开始!
显示效果为
在行中居中:display:inline-block;单独行居中: display:block总结:
1、给对应的要居中的容器加上text-align:属性就可以实现居中对齐了;
2、 html的&a&标签display:block之后文字竖直,设置行高和&a&标签的高度一样就能居中,使用line-
6 总笔记数
4345 总阅读量
Copyright &
All Rights Reserved.
合作伙伴:var sogou_ad_id=731545;
var sogou_ad_height=90;
var sogou_ad_width=980;后使用快捷导航没有帐号?
只需一步,快速开始
查看: 92342|回复: 4
用html,body标签元素实现页面居中
UID167344在线时间 小时积分738帖子离线17302 天注册时间
高级会员, 积分 738, 距离下一级还需 262 积分
一般如果想页面居中,在body上设置样式:
body{background:#D2D460;text-align:}复制代码
再加一个div标签元素设置样式:
div{width:778margin:0background:#text-align:}复制代码
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&meta http-equiv=&Content-Language& content=&zh-CN& /&
&style type=&text/css&&
body{background:#D2D460;text-align:}
div{width:778margin:0background:#text-align:}
&div&你看,可以居中的!&/div&
&提示:您可以先修改部分代码再运行
其实html也是一个标签元素,也可以给它设置CSS样式,那么可以把上面CSS代码改成:
html{background:#D2D460;text-align:}
body{width:778margin:0background:#text-align:}复制代码
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&meta http-equiv=&Content-Language& content=&zh-CN& /&
&style type=&text/css&&
html{background:#D2D460;text-align:}
body{width:778margin:0background:#text-align:}
&div&你看,这样也可以居中的!&/div&
&提示:您可以先修改部分代码再运行
这样也完全可以居中,而不用再在div上设置居中的样式了,这样可以更加有效率地使用页面标签元素。按照这种方法推演下去,还能够给html标签元素增加边框还有背景图片,就像使用div标签元素一样使用html标签元素如下:
html{border:5px solid #436BAD;background:#D2D460;text-align:}
body{width:778margin:0border:5px solid #F9F9E9;background:#text-align:}复制代码
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&meta http-equiv=&Content-Language& content=&zh-CN& /&
&style type=&text/css&&
html{border:5px solid #436BAD;background:#D2D460;text-align:}
body{width:778margin:0border:5px solid #C2C35C;background:#text-align:}
&div&你看,这样也可以居中的!&/div&
&提示:您可以先修改部分代码再运行
但经过xhlv指出如果页面中有position:relative的标签,在IE中该标签在浏览器窗口宽度改变时不会跟着移动,刷新一下才会过去,而且他也给出了解决方法,就是在body上也加position:样式.
[[i] 本帖最后由 resun 于
20:39 编辑 ]
UID279437在线时间 小时积分307帖子离线17302 天注册时间
中级会员, 积分 307, 距离下一级还需 193 积分
不过页面里如果有position:relative的标签就不行了,IE中该标签在浏览器窗口宽度改变时不会跟着移动,刷新一下才会过去.
而position:relative经常会用到.
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&meta http-equiv=&Content-Language& content=&zh-CN& /&
&style type=&text/css&&
html{background:#D2D460;text-align:}
body{width:778margin:0background:#text-align:}
div{position:}
&div&改变浏览器窗口宽度看,我动不了了!&br/&刷新一下页面我才会过去!&/div&
&提示:您可以先修改部分代码再运行
[[i] 本帖最后由 xhlv 于
16:02 编辑 ]
UID167344在线时间 小时积分738帖子离线17302 天注册时间
高级会员, 积分 738, 距离下一级还需 262 积分
是的,不好意思,以前没在发现,现在也还没有找到解决方法。
盼望高手。
UID279437在线时间 小时积分307帖子离线17302 天注册时间
中级会员, 积分 307, 距离下一级还需 193 积分
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&title&&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312& /&
&meta http-equiv=&Content-Language& content=&zh-CN& /&
&style type=&text/css&&
html{background:#D2D460;text-align:}
body{width:778margin:0background:#position:text-align:}
div{position:}
&div&改变浏览器窗口宽度看,我又能动了!&/div&
&提示:您可以先修改部分代码再运行
[[i] 本帖最后由 xhlv 于
20:28 编辑 ]
UID167344在线时间 小时积分738帖子离线17302 天注册时间
高级会员, 积分 738, 距离下一级还需 262 积分
也就是说也要在body元素上加position:
谢谢指教,我抛砖引玉了.
Powered by

我要回帖

更多关于 p标签居中 的文章

 

随机推荐