网页制作中垂直居中的技巧

2016-10-27 分类：网站建设

在实际的网页制作过程中，网页中有很多的东西需要我们进行垂直居中，例如文字垂直居中，多行文字垂直居中，块级元素垂直居中，背景图片垂直居中。今天我就给大家来说一下应该怎样对这些东西进行垂直居中。1.单行文字垂直居中。单行文字居中的方法其实很简单，只需要在css中给对应的父标签设置line-height为父级标签的高度就可以实现对单行文字的垂直居中了。而图片也是属于行内元素，别看它可以设定固定的宽高，line-height对img标签也是有影响的，所以在需要对img标签垂直居中的时候是可以使用line-height的，如果不需要line-height影响到img标签的话，可以给img标签设置为block，然后使用浮动属性就可以了。2.多行文字垂直居中多行文字垂直居中需要给每一行的文字上包一个行内快元素，或者包一个别的元素设置成行内块就可以了。再给行内快的父元素设置line-height，而行内快元素设置宽高和里面的行高就可以了。3.块级元素居中。块级元素居中需要给这个块级元素的父级设置相对定位属性，然后给需要垂直居中的块级元素设置绝对定位，top或者bottom值为50%；margin-top是负的这个块级元素的高的一半就可以了。4.背景图片垂直居中。在实际的网页制作工作中经常会用到背景图片，需要对背景图片垂直居中就需要用到background-position属性了，这个属性后面可以填写一个或者两个值，一个值是水平方向上的定位，而第二个值是垂直方向上的定位，起始点是元素的左上角。如果输入一个值得话，浏览器会认为水平方向和垂直方向上的值是一样的。想要垂直居中那么就给第二个值设为center，一个值根据自己的需要来调试。以上就是关于常用的垂直居中的使用技巧，根据不同的情况使用不同的方法可以大大提升开发效率。

网站标题：网页制作中垂直居中的技巧
文章分享：https://www.cdcxhl.com/news1/54851.html

成都网站建设公司_创新互联，为您提供服务器托管、动态网站、电子商务、网站建设、域名注册、网站策划

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容