CSS布局对齐方式 |
您所在的位置：网站首页 › dreamweaver图片如何居中对齐 › CSS布局对齐方式 |
CSS布局对齐方式
|
前言：在网页布局中，经常遇到需要使元素居中对齐的时候，居中对齐的方式有：水平居中、垂直居中和水平垂直居中。这次，借此回顾总结一下，并在此记录下相关内容。 一、水平居中： （1）行内元素的水平居中 如果被设置的元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的设置为display:inline-block，使子元素变成行内元素； demo .parent { text-align: center; } .child { display: inline-block; }
(2)块状元素的水平居中（定宽） 当被设置元素为定宽块级元素时用text-align:center;就不起作用了。可以通过设置“margin: 0 auto;”来实现居中的。 demo .child { width: 200px; margin: 0 auto; }(3)块状元素的水平居中（不定定宽） 在实际工作中，我们会遇到需要为“不定宽度的块级元素”设置居中，如网页上的分页导航，因为分页的数量是不确定的，所以，不能通过设置宽度来限制它的弹性。 可以直接给补丁款的块级元素设置text-align:center;来实现，也可以给父元素加text-align:center;来实现居中效果。 当不定宽块级元素的宽度不要占一行时，可以设置display为inline类型或inline-block（设置为行内元素显示或行内块元素）。 1 2 3 .container { text-align: center; background: beige; } .container ul { list-style: none; margin: 0; padding: 0; display: inline-block; } .container li { margin-right: 8px; display: inline-block; }
二、垂直居中 和水平居中一样，垂直居中，首先需设定两个条件即父元素是盒子容器且高度已经设定。 （1）子元素是行内元素，高度是由其内容撑开的。 这种情况下，需要通过设定父元素的line-height为其高度来使得子元素垂直居中。 111111 .wrap { width: 200px; height: 300px; line-height: 300px; border: 2px solid #ccc; } .span { background: red; } (2)子元素是块级元素但子元素高度没有设定，在这种情况下，实际上是不知道子元素的高度的，无法通过计算得到padding或margin来调整。 可以通过给父元素设定display:table-cell;vertical-align:middle;来解决。 111111 .wrap { width: 200px; height: 300px; border: 2px solid #ccc; display: table-cell; vertical-align: middle; } .non-height { background: green; }
(3)子元素是块级元素且高度已经设定 计算子元素的margin-top或margin-bottom，计算方法为父（元素高度-子元素高度）/ 2； 111111 .wrap { width: 200px; height: 300px; border: 2px solid #ccc; } .div1 { width: 100px; height: 100px; margin-top: 100px; background: darkblue; }
三、水平垂直居中 （1）水平对齐+行高 text-align + line-height实现单行文本水平垂直居中 .test { text-align: center; line-height: 100px; }
(2)水平+垂直对齐 ①text-align + vertical-align 在父元素设置text-align和vertical-align，并将父元素设置为table-cell元素，子元素设置为inline-block元素。 .parent { display: table-cell; text-align: center; vertical-align: middle; } .child { display: inline-block; } 测试文字
PS:01、补充《三》中的水平垂直居中的方式（2018/08/29） translate()函数可以在不知道自身宽高的情况下，利用它进行水平垂直居中。但是，有兼容性问题，支持IE9+的游览器。 使用translate函数，配合left，top属性，可以让目标元素始终保持水平垂直居中，当游览器窗口发生变化时，也能一直保持水平垂直居中。 不知道宽高，可以水平垂直居中 .wrap { padding: 10px; background: green; color: #fff; border-radius: 5px; position: absolute; top: 50%; left: 50%; /*定位margin-left:50%的位置*/ -webkit-transform: translate(-50%,-50%); /*Safari,Chrome*/ -moz-transform: translate(-50%,-50%); /*IE9+*/ transform: translate(-50%,-50%); /*使元素本身向左移动宽度的一半*/ /*transform使元素在当前位置分别往x轴，y轴正向平移自身宽度的一半距离。*/ }02、补充《三》中的水平垂直居中的方式（2018/11/29） 场景：使用背景图片属性，使图片在父元素的盒子中始终居中，但是，背景图片的尺寸大小不固定。 关键：background-position:center center;(background-position:50% 50%;)属性。 .index-image { height: 268px;/*选取三张图片中最大高度的尺寸设定*/ width: 100%; max-width: 484px; /*选取三张图片中的最大宽度的尺寸设定*/ background: url(images/403.png); /*403图片尺寸为484*206*/ /*background: url(images/404.png);*/ /*403图片尺寸为428*268*/ /*background: url(images/500.png);*/ /*500图片尺寸为475*236*/ background-position: center center; border: 1px solid #333333; }
background-position属性默认值为0% 0%，即背景图像的左上角与对象背景区域的左上角对齐。使用background-position:center center;/background-position:50% 50%;这样就可以使背景图像的中心，与背景区域的中心对齐，即背景图像位于对象的中央位置。 参考博客：CSS布局（六）对齐方式 点击打开链接 http://www.cnblogs.com/chaixiaozhi/p/8490725.html 版权声明：本文为博主原创文章，未经博主允许不得转载。
|
【本文地址】
今日新闻 |
推荐新闻 |