HTML中元素水平居中。
2020-12-13 02:01
YPE html>
标签：style class java ext color width
一丶margin:0 auto;
试用最多的方法，简单实用。
二丶vertical-align:middle;
只适用于内嵌元素，比如说一个div中有一个图片和文字，要让图片和文字中线对齐。
关注前端，关注用户体验-冀
三丶position:relative;
通过给父元素设置浮动float，再设置父元素的position属性为relative和left：50%;子元素设置position：relative和left：-50%来实现水平居中。这个好处是可以保留块级元素仍然是以display：block的形式显示，不会添加无意义的标签，不添加嵌套深度。确点是设置了position：relative;带来了一些副作用。下面是第三种方法的实例代码，放到body标签里面就可以了。
- OKOKOKOKKOOKK
四丶margin-left;
通过margin的left来设置居中，需要多尝试参数值。
五丶padding-left;
通过padding的left来设置居中，需要多尝试参数值。
六丶text-align:center:
首先在父级元素定义text-align: center;这个的意思就是在父级元素内的文字内容居中；
七丶center(图片居中)
body{backgroud: url(“1.png”) #FFF no-repeat
center;}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top
left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"
八丶JS控制居中
说明:js根据页面大小变化设置div左右居中, 要应用js代码，要设置position：absolute关注前端，关注用户体验-冀
此为居中的div
HTML中元素水平居中。,搜素材,soscw.com
HTML中元素水平居中。
标签：style class java ext color width
原文地址：http://www.cnblogs.com/lhjit/p/3714487.html