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

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。内容未经允许不得转载,或转载时需注明来源: 创新互联

h5响应式网站建设