在HTML中关于元素居中有哪些需要注意的事项


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来在HTML中关于元素居中有哪些需要注意的事项,在HTML中关于元素居中需要注意的事项有哪些,下面就是实战案例,一起来看一下。

不使用定位

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

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

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

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

1

2

3

4

5

6

7

8

.first{

    width: 300px;

    height: 100px;

    background-color: black;

    color: white;

    text-align: center;

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

  }

1

2

3

<div class="first">

不使用定位(1)

</div>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

.second{

    width: 300px;

    height: 100px;

    background-color: green;

  }

  .s_child{

    width: 150px;

    line-height: 100px;

  }

<div class="second">   

<div class="s_child">  

   不使用定位(2)   

</div>

</div>

 2.定位居中

   a.父元素高度固定     

    父元素:相对定位

    子元素:绝对定位

        top:50%(父元素高度的一半)

        left:50%

        margin-top:自己的高度一半;(加负号)

        margin-left:自己宽度的一半;(加负号)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.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;

    }

    <div class="dw_one">

    <div class="dw_one_child">

      a   

    </div>

    </div>

 b.父元素高度不固定

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

.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%);

    }

    <div class="wrapper">

  <div class="dw_two">

      <div class="dw_two_child">

        a

      </div>

  </div>

</div>

 3.关于多行文本的居中

    使用display:table; display:table-cell;

    vertical-align:middle; 居中

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

#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%;

       }

<div id="outer">

     <div id="inner">

       <div id="content">

          Paradise_追逐者所写的居中问题总结之我见

       </div>

    </div>

</div>

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

怎样实现HTML的仿命令行界面

meta name="" content="应如何使用

以上就是在HTML中关于元素居中有哪些需要注意的事项的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html中如何建立超链接

Html如何禁止文本框输入

Html中如何调整图片之间的间距

Html中sup标签上标字符和sub标签下标字符的使用方法介绍

Html怎么去除下划线

Html如何让网页居中

Html中的段落文本如何换行?一篇文章告诉你换行标签br的用法

Html的意思是什么

Html怎样在消息按钮上增加数量角标

Html中span怎么使用

更多相关阅读请进入《Html》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...