js使用div内容居中

JavaScript09

js使用div内容居中,第1张

1、准备好一个空的html结构的文档。

2、接下来要准备的是准备一个div用来放内容了,这里为了显示特意给div设置了边框。

3、接下来就在div中添加内容,如下图所示,运行后会发现内容偏向于左上角。

4、给div设置水平居中,如下图所示,并且设置行高为div的高度,会发现它水平垂直居中了。

5、让其display属性为table-cell,知道table单元格中可以通过vertical-align垂直居中,转化后也可以用此属性。

6、运用display转化后会发现margin的auto属性不起作用了。

1. 兼容性问题:getElementsByClassName 在IE不支持

2. offsetHeight,scrollHeight,clientHeight , style.height, height 属性都要考虑

3. 垂直居中:left + top + height + 窗口参照 决定

1、打开编辑器,新建test.html,用于学习今天的内容。

2、接下来需要在head标签下方引入jquery.min.js插件,如下图所示。

3、在页面的body标签里,新建一个div,名称为test。

4、在body标签下方写上<script></script>,用来存放js代码。通过class定位到div,通过css()方法让文字居中。

5、在浏览器中打开test.html,可以在文字在页面中间显示。