div内图片和文字水平垂直居中

 

大小不固定的图片、多行文字的水平垂直居中

 

本文综述

想必写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" style="background-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和文字大小实现的图片垂直居中显示

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-cell+font-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部分:

<li><img data-src="http://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属性就可以了。
我个人更推荐使用行内元素,例如span,i标签等,只要应用类似下面的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使图片垂直居中显示,Firefox,chrome等现代浏览器使用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;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247619.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

敏友的【敏捷个人】有感(3): 有感于“敏捷个人”讨论与练习

2010年我对个人管理进行了自己的一些思考&#xff0c;在2011年提出敏捷个人概念&#xff0c;并且在线上、线下进行了多次交流&#xff0c;在一些大会上也做过分享。现在&#xff0c;已经有很 多IT和非IT的敏友们知道并在践行敏捷个人&#xff0c;帮助自己更快的成长。我收到大家…

jQuery编写插件

引言&#xff1a; 在项目中不同页面经常要用到已经写好的交互&#xff0c;比如弹窗&#xff0c;比如下拉菜单&#xff0c;比如选项卡&#xff0c;比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情&#xff0c;而且个人认为有些low了&#xff0c;我们…

webstorm中nodejs代码提示

preferences->languages&frameworks->Node.js and Npm中选择一个本地的node版本 preferences->languages&frameworks->JavaScript->Libraries 勾选node.js Core 回到代码

Array.prototype.slice.call(arguments)

Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组&#xff0c;除了IE下的节点集合&#xff08;因为ie下的dom对象是以com对象的形式实现的&#xff0c;js对象与com对象不能进行转换&#xff09;如&#xff1a;1 var a{length:2,0:first,1:second}; 2 Ar…

nodejs常用模块-url

URL nodejs中针对url的常用方法。 node下打印url&#xff0c;结果&#xff1a; 引入url模块 var url require(url) 1、parse方法 将url解析成对象&#xff0c;parse方法原型&#xff1a; url.parse(urlStr[, parseQueryString][, slashesDenoteHost]) 可传递三个参数…

常用的javascript设计模式

请坚持 什么是设计模式 百度百科&#xff1a; 设计模式&#xff08;Design pattern&#xff09;是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。 使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问&#xff0c;设计模式…

iOS警告-This block declaration is not a prototype

关于警告 我们定义一个不带参数的block,通常是如下的方式 1typedefvoid (^UpdateSwichBtnBlock)();在xcode9中会提示一个警告 12This block declaration is not a prototypeInsert ‘void解决方式可以是如下的几种 1typedefvoid (^UpdateSwichBtnBlock)(void);但是这样,很多第三…

mongoose操作mongodb

http://mongoosejs.com/docs/api.html#index-js mongoose是nodejs环境下操作mongodb的模块封装&#xff0c;使用mongoose之后&#xff0c;实际上只需要在mongodb中创建好数据库与用户&#xff0c;集合的定义、创建、操作等直接使用mongoose即可。 一、连接二、重要概念三、基本…

mac下iterm配色、半透明与样式设置

主要为了实现命令行颜色高亮与整个命令窗口半透明效果。 1、配色主题包下载 1、http://iterm2colorschemes.com/ 下载后解压&#xff0c;到iterm2中&#xff0c;左上角iTerm2->preferences->Profiles&#xff0c;右侧面板找到Colors选项&#xff0c;右下角展开Color Pr…

一个 Dubbo 服务启动要两个小时

前几天在测试环境碰到一个非常奇怪的与 dubbo 相关的问题&#xff0c;事后我在网上搜索了一圈并没有发现类似的帖子或文章&#xff0c;于是便有了这篇。 希望对还未碰到或正在碰到的朋友有所帮助。 现象 现象是这样的&#xff0c;有一天测试在测试环境重新部署一个 dubbo 应用的…

表单提交enctype参数详解之:application/x-www-form-urlencode和multipart/form-data

application/x-www-form-urlencode 我们在提交表单的时候&#xff0c;form表单参数中会有一个enctype的参数。enctype指定了HTTP请求的Content-Type。 默认情况下&#xff0c;HTML的form表单的enctypeapplication/x-www-form-urlencoded。 application/x-www-form-urlencoded是…

内网端口映射工具

由于开发微信需要一个公网域名&#xff0c;需要将本地端口映射到外网域名&#xff0c;最热的工具是ngrok&#xff0c;但被微信屏蔽了&#xff0c;这里使用的是natapp&#xff0c;环境是mac&#xff0c;windows下可使用nat123、花生壳等工具实现同样功能。 简单记录一下过程。 …

iOS----------iPhone导出手机所有短信

第一步&#xff1a;手机连接到itunes 选择本电脑备份 备份的时候不要加密 然后立即备份 第二步&#xff1a;前往文件夹&#xff0c;找到itunes的备份路径~/Library/Application Support/MobileSync/Backup 在这目录下搜索 3d0d开头的文件&#xff0c;这就是 iPhone 短信的…

跨站点脚本(XSS)

1. 简介 跨站点脚本(XSS)是当前web应用中最危险和最普遍的漏洞之一。安全研究人员在大部分最受欢迎的网站,包括Google, Facebook, Amazon, PayPal等网站都发现这个漏洞。如果你密切关注bug赏金计划,会发现报道最多的问题属于XSS。为了避免跨站脚本,浏览器也有自己的过滤器,但安…

CSRF攻击原理及防御

CSRF攻击原理及防御 一、CSRF攻击原理 CSRF是什么呢&#xff1f;CSRF全名是Cross-site request forgery&#xff0c;是一种对网站的恶意利用&#xff0c;CSRF比XSS更具危险性。想要深入理解CSRF的攻击特性我们有必要了解一下网站session的工作原理。   session我想大家都不…

H3C FTP配置示例

转载于:https://www.cnblogs.com/fanweisheng/p/11156596.html

windows10系统下MongoDB的安装及环境配置

windows10系统下MongoDB的安装及环境配置&#xff1a; MongoDB的安装 下载地址&#xff1a; https://www.mongodb.com/download-center (这是windows10环境下的教程&#xff01;请注意&#xff01;) 下载后&#xff0c;我们点击mongodb-win32-x86_64-2008plus-ssl-3.4.3-signed…

CSS clip:rect矩形剪裁功能

CSS中有一个属性叫做clip&#xff0c;为修剪&#xff0c;剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中&#xff0c;且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。 根据Dreamweaver的自动提示&a…

Node.js 部署免费/自动续订 HTTPS

统计了使用 Chrome 浏览器&#xff0c;访问的站点统计中&#xff0c;HTTPS 使用率的增长情况&#xff1a;而在今年 2 月份&#xff0c;Chrome 团队也宣布&#xff0c;将在 2018 年 7 月份发布的 Chrome 68 中&#xff0c;将没有部署 HTTPS 的网站标记为 "不安全"。简…

MVVM原理还你

众所周知当下是MVVM盛行的时代&#xff0c;从早期的Angular到现在的React和Vue&#xff0c;再从最初的三分天下到现在的两虎相争。 无疑不给我们的开发带来了一种前所未有的新体验&#xff0c;告别了操作DOM的思维&#xff0c;换上了数据驱动页面的思想&#xff0c;果然时代的进…