在HTML中使用元素居中需要什么注意事项
这篇文章将为大家详细讲解有关在HTML中使用元素居中需要什么注意事项,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联公司长期为成百上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为景县企业提供专业的做网站、成都网站设计,景县网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。
不使用定位
水平居中:text-align = center;(可继承)
竖直居中:margin:0 auto;(块级元素)
其他居中:1.文字居中:父元素设置高 子元素设置高 line-height=height(父元素)
2.图片居中: vertical-aign:middle ; <-- 必须放在图片元素中
.first{ width: 300px; height: 100px; background-color: black; color: white; text-align: center; margin: 0 auto; //针对块级元素 }
不使用定位(1)
.second{ width: 300px; height: 100px; background-color: green; } .s_child{ width: 150px; line-height: 100px; }不使用定位(2)
2.定位居中
a.父元素高度固定
父元素:相对定位
子元素:绝对定位
top:50%(父元素高度的一半)
left:50%
margin-top:自己的高度一半;(加负号)
margin-left:自己宽度的一半;(加负号)
.dw_one{ width: 600px; height: 300px; position: absolute; background: black; } .dw_one_child{ background: white; position: relative; width: 50px; height: 50px; top: 50%; left: 50%; margin-top: -25px; margin-left: -25px; }a
b.父元素高度不固定
.wrapper{ width: 600px; height: 600px; } .dw_two{ width: 100%; height: 100%; position: absolute; background: black; } .dw_two_child{ background: white; position: relative; top: 50%; left: 50%; width: 100px; height: 100px; transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); }a
3.关于多行文本的居中
使用display:table; display:table-cell;
vertical-align:middle; 居中
#outer{ width: 200px; height: 200px; background: #cccccc; display: table; _position: relative; // "_"为了兼容IE6 } #inner{ display: table-cell; vertical-align: middle; _position: absolute; _top: 50%; } #content{ _position: relative; _top: -50%; }Paradise_追逐者所写的居中问题总结之我见
关于“在HTML中使用元素居中需要什么注意事项”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
当前标题:在HTML中使用元素居中需要什么注意事项
网站网址:http://myzitong.com/article/gpdiip.html