德阳建设厅官方网站,发稿软文公司,技术博客wordpress主题,wordpress 文章标题字体大小不固定的图片、多行文字的水平垂直居中 本文综述
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中#xff0c;但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢#xff1f;本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居…
大小不固定的图片、多行文字的水平垂直居中 本文综述
想必写css的都知道如何让单行文字在高度固定的容器内垂直居中但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居中显示想必很多写css的人都研究过或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法用font-size解决IE下垂直居中的问题是个好方法吗是的方法是不错可是问题也很多不支持img外标签的浮动致使多图片排列时需添加额外标签需要记住一些比例参数上手较难原理艰深兼容性不稳定等。但是在我看来这个方法不足够好本文将提供两种更为新颖的方法代码简洁原理简单上手容易兼容性强出错率低的方法。inline-block裸标签对齐法以及透明图片拉伸对齐法。 css是如此的精深我相信后来人会有更加绝妙的方法。但是本文提供的几种实现图片垂直居中方法一定是目前最实用的几种方法。
一、大小不固定多行文字的垂直居中
① 单行文字 可能很多人都知道如何让单行文字垂直居中显示就是使用line-height将line-height值与外部标签盒子的高度值设置成一致就可以了。例如如下css代码height:3em; line-height:3em; …… 显示结果如下图
单行文本垂直居中对齐-鑫空间-鑫生活 ② 多行文字 如何实现父容器高度固定文字可能一行两行或更多行的垂直居中对齐呢 实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来设置文字与图片相同的display属性inline-block属性然后用处理图片垂直居中的方式处理文字的垂直居中即可。 核心css代码如下 外部div标签 div{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;} 内部span标签 span{display:inline-block; font-size:0.1em; vertical-align:middle;} 下面这张是实例演示页面的效果截图
行数不固定文字垂直居中对齐 有几点简要说明 1.此例子用em做单位如果您对em单位了解不够把握不来的话可以使用px做单位值要换 2.外部div不能使用浮动 3.外部div高度和文字大小比例1.14为宜 4.内部标签的vertical-align:middle可以省略但是外部div高度和文字大小比例要修改我自己试了一下高度比字体1.5左右的样子 5.系统原因我没能够在IE8下测试。
实现的最终效果和JavaScript演示您可以狠狠地点击这里去看看。
二、大小不固定图片的水平垂直居中
① 透明gif图片背景定位的方法 这里利用了background-position:center实现图片居中显示。这是个很实用也是很聪明的办法对于维护控制成本都很不错。微软必应图片搜索的图片排列就是使用的这种方法。 方法的原理很简单使用一个透明的gif图片做覆盖层高宽拉伸至所需要的大小然后给这个gif图片一个background- position:center center的属性。而background-image建议写在页面上因为实际项目中这肯定是个动态的URL地址css文件似乎不支持动态URL 地址。下面就是实例演示页面的效果截图。
透明图片和背景定位实现图片水平垂直居中 核心HTML代码为 img src../image/pixel.gif stylebackground-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg); / 其中此img标签已经设置了高宽和背景居中定位的属性。具体实现可以可以狠狠地点击这里进行参照。
② display:table-cell和文字大小控制居中
这个方法可以说就是本文综述部分提到的淘宝团队想出的图片垂直居中的方法。但是本文展示的这个方法的css代码又不是淘宝工程师们的原版代码我对其做了一定的修改把里面没有用可以剔除的hack都去掉了。
css代码部分 img外部div标签 div {display:table-cell; width:1em; height:1em; font-size:144px; width:144px; height:144px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle;}/*这里的大小是根据高宽上限128像素图片设置的*/ img标签 img{vertical-align:middle;} 需要说明的 1.原版的代码中有两个hack一个是针对文字大小的另外一个是针对block属性的后经过我测试推敲后证实这两个hack都是多余的而*display:block更是多余因为IE6,IE7根本就不认识display:table-cell是谁 2.这个通过文字大小控制IE下图片垂直居中是个很不错的方法要比使用position:relative这类高消耗的css方法要好多了。但是这个方法不足之处在于不支持img外标签的浮动所以当多图片显示时需要再在外面嵌套一层标签——资源消耗多了 3.高度文字大小1.14这个比例我一直记着但是后来我将这个比例的概念淡化了原因在于多次遇到其他比例实现效果的情况。例如上面就是1:1实现的。
这里附上效果截图取自IE6浏览器
table-cell和文字大小实现的图片垂直居中显示 图片和文字比不上直接的效果显示所以建议您狠狠地点击这里。
③ display:inline-block和文字大小控制居中 此方法的灵感来自于Google picasa相册的图片显示代码相当简洁是个成本很低效果惊人的方法。适用于多图显示的情况。基本上用裸标签就实现了想要达到的效果。一般而言图片阵列排列显示的时候外面都有一个a标签的起到链接的作用。而本处的方法就只要这一个a标签就足以实现图片垂直且居中的显示效果。其关键是将a标签默认的inline属性设置为inline-block属性这样a标签既支持宽度又支持vertical-align:middle配合img的vertical-align:middle就可以实现图片的水平垂直居中显示了。 css代码 a标签 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;} img标签 img{vertical-align:middle;} 就这么简单就实现了图片的垂直居中效果。下截图为证
最精简的实现图片水平垂直居中显示的方法 另外补充说明的img外的标签需是a标签或span这类inline属性的标签div标签也可以但是css代码多些: display:inline-block;*display:inline; zoom:1; IE下要先变成inline属性再转变成类似于inline-block的属性原因讲起来又是一篇长长的文章放着。
建议您狠狠地点击这里直接查看源代码
④ 透明图片拉伸对齐实现垂直居中显示 这个方法是我自认为相当不错的一个方法说实话想到这个方法是自然而然的经过试验发现真的很管用。对比淘宝团队的方法发现优势很多基本上淘宝的table-cellfont-size方法会带来的些问题都避免了。 非常简单非常易懂出错率低上手方便兼容性上佳
原理简述 一句话将要显示的图片与一张透明的高度100%宽度1像素的透明图片vertical-align:middle对齐。 其核心原理其实与利用font-size大小实现IE下图片垂直居中是一致的。将font-size设置得很大目的是撑开IE下默认文字空间的高度其性质类似于空格然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐而这里将这个看不见的文字空间实例成一张透明的gif图片高度可以轻松设置为外部标签的高度宽度压缩至最小然后通过vertical-align:middle对齐就实现效果了由于影响布局的差不多就vertical-align:middle这一个属性所以出现兼容性问题的可能性比table-cell的方法要低得多。需要注意的 1.img外容器宽度要大于要显示的图片的最大宽度1像素 2.img外容器的字体大小设为0px也可以不设但是两个img标签要连着写避免空格
以下是核心的一些代码 HTML部分 liimg data-srchttp://image.zhangxinxu.com/image/study/s/s128/mm1.jpg /img src../image/pixel.gif /
/li css部分 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;}
li .alpha_img{height:100%; width:1px; vertical-align:middle;}
li .alpha_img{height:100%; width:0; vertical-align:middle;}
li .show_img{vertical-align:middle;}其实只要有上面绿色部分的css代码就足够了。 简单的超乎想象。
要显示的图片后面跟了一个高度撑满容器只有1px宽宽度为0即可透明的图片。这两个图片分别vertical-align:middle就实现了要显示的图片与这个拉伸的透明图片的居中对齐了由于透明图片是透明的不可见的宽度也只有1像素宽度也为0所以看上去就是要显示的图片相对于容器垂直居中了。
另外其实这里不一定是透明的图片使用任意的图片都可以所以您其实说不定可以减少一次http请求使用任意的图片将其拉伸至高度为容器高宽度1像素宽度0就可以了。
甚至使用span标签div标签也可以实现同样的效果。只要将span标签或div标签转换成inline-block属性或类似于inline-block属性就可以了。 我个人更推荐使用行内元素例如spani标签等只要应用类似下面的CSS span{display:inline-block; height:100%; width:0; vertical-align:middle;} 相比图片而言多了个display:inline-block; 但是会少一次链接请求。效果图和上面的一样的完美的水平垂直居中。原理也与图片一样相信很容易理解的。
再提供一下实例页面的链接狠狠地点击这里实例页面的最后一种方法向您展示了这种新颖的图片垂直居中的方法。
最后说句实在话我知道这应该不算什么新颖的方法在我之前想到这种方法的人肯定不在少数但是留迹于网上的却没有我是没有发现过。我不清楚是这些大牛的公司要求技术保密还是自身不愿分享研究成果。我相信不是这样的主要还是他们很忙碌没有时间写这些东西。像我这样”闲暇”的很花十几个小时写一篇文章的估计不多呵呵。
补充于2009-11-03 15:32 正如我经常挂在嘴边的css博大精深你需要花费精力去观察它研究它。这里我再提供一种我刚刚试验出来的一种新方法实现大小不固定的图片水平垂直居中综合来讲比上面所有提供的方法还要优秀且没有hack兼容性上佳支持IE6、IE7、Firefox、chrome、Safari浏览器-IE8未测补充我后来又测试了一下结果在IE8浏览器和Opera浏览器下是不垂直居中的所有此方法还是有待商榷的。下为在IE7下的效果截图 此方法原理是在IE下使用font-size使图片垂直居中显示Firefoxchrome等现代浏览器使用line-height配合img本身的vertical-align属性使垂直居中显示由于两者不冲突所以没有hack就实现的效果。css代码简洁明了关键是HTML代码非常清晰一层外标签里面就是img标签我想很难再找出比这个方法更出色的让图片水平垂直居中的方法了。好吧其实这个方法是有一点不完美的就是opera浏览器下图片无法垂直居中显示幸好国内而言使用opera浏览器的比例很低所以综合来讲这个方法是个非常优秀的图片水平垂直居中的方法。
以下为css代码部分 .zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; font-size:125px;}
.zxx_ul_image li img{vertical-align:middle;}.zxx_ul_image li{float:left; width:150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
.zxx_ul_image li:after{content: ; vertical-align:middle;}
.zxx_ul_image li img{vertical-align:middle;}
