HTML中元素居中要注意哪些事项

这篇文章主要讲解了“HTML中元素居中要注意哪些事项”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML中元素居中要注意哪些事项”吧!

创新互联建站是一家集网站建设,普陀企业网站建设,普陀品牌网站建设,网站定制,普陀网站建设报价,网络营销,网络优化,普陀网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

不使用定位

水平居中:text-align=center;(可继承)

竖直居中:margin:0auto;(块级元素)

其他居中:

      1.文字居中:父元素设置高子元素设置高line-height=height(父元素)

2.图片居中:vertical-aign:middle;<--必须放在图片元素中

.first{

width:300px;

height:100px;

background-color:black;

color:white;

text-align:center;

margin:0auto;//针对块级元素

}

不使用定位(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%;

}

感谢各位的阅读,以上就是“HTML中元素居中要注意哪些事项”的内容了,经过本文的学习后,相信大家对HTML中元素居中要注意哪些事项这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


新闻标题:HTML中元素居中要注意哪些事项
文章URL:http://scyanting.com/article/gdegej.html

其他资讯