`
charrys
  • 浏览: 35181 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类

垂直居中及容器内图片垂直居中的CSS解决方法

    博客分类：
  • css
CSSGoogleXHTMLHTMLIE
阅读更多

Div与CSS布局，最让人头疼的就是容器内的东西如何垂直居中的问题，我在做站时也遇到，查了一下资料，总结出以下居中办法，兼容IE与及 Firefox！

方法一

Html代码复制代码
  1. <style type="text/css">  
  2. <!--    
  3. * {margin:0;padding:0}   
  4. div {   
  5.   width:500px;   
  6.   height:500px;   
  7.   border:1px solid #666;   
  8.   overflow:hidden;   
  9.   position:relative;   
  10.   display:table-cell;   
  11.   text-align:center;   
  12.   vertical-align:middle   
  13. }   
  14. div p {   
  15.   position:static;   
  16.   +position:absolute;   
  17.   top:50%   
  18.   }   
  19. img {   
  20.   position:static;   
  21.   +position:relative;   
  22.   top:-50%;left:-50%;   
  23.   }   
  24. -->  
  25. </style>  
  26. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  

方法二

Html代码复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>div里面图片垂直居中的几个例子</title>  
  6. <style type="text/css">  
  7. <!--    
  8. body {   
  9.   margin:0;padding:0   
  10. }   
  11. div {   
  12.   width:500px;   
  13.   height:500px;   
  14.   line-height:500px;   
  15.   border:1px solid #666;   
  16.   overflow:hidden;   
  17.   position:relative;   
  18.   text-align:center;   
  19. }   
  20. div p {   
  21.   position:static;   
  22.   +position:absolute;   
  23.   top:50%   
  24. }   
  25. img {   
  26.   position:static;   
  27.   +position:relative;   
  28.   top:-50%;left:-50%;   
  29.   vertical-align:middle   
  30. }   
  31. p:after {   
  32.   content:".";font-size:1px;   
  33.   visibility:hidden   
  34. }   
  35. -->  
  36. </style>  
  37. </head>  
  38. <body>  
  39. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  
  40. </body>  
  41. </html>  

方法三

Html代码复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>div里面图片垂直居中的几个例子</title>  
  6. <style type="text/css">  
  7. <!--    
  8. * {margin:0;padding:0}   
  9. div {   
  10.   width:500px;   
  11.   height:500px;   
  12.   line-height:500px;   
  13.   border:1px solid #666;   
  14.   overflow:hidden;   
  15.   position:relative;   
  16.   text-align:center;   
  17. }   
  18. div p {   
  19.   position:static;   
  20.   +position:absolute;   
  21.   top:50%;   
  22.   vertical-align:middle   
  23. }   
  24. img {   
  25.   position:static;   
  26.   +position:relative;   
  27.   top:-50%;left:-50%;   
  28.   vertical-align:middle   
  29. }   
  30. -->  
  31. </style>  
  32. </head>  
  33. <body>  
  34. <div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>  
  35. </body>  
  36. </html>  

方法四（针对背景图片居中）

Html代码复制代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>div里面图片垂直居中的几个例子</title>  
  6. <style type="text/css">  
  7. <!--    
  8. * {margin:0;padding:0;}   
  9. div {   
  10.   width:500px;border:1px solid #666;   
  11.   height:500px;   
  12.   background:url("http://www.google.com/intl/en/images/logo.gif") center no-repeat   
  13. }   
  14. -->  
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div></div>  
  19. </body>  
  20. </html>  

转自(http://www.ok22.org/art_detail.aspx?id=73)

分享到：
| js给C#控件赋值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    未知大小的图片在已知容器中的垂直居中和水平居中

    δ知大小的图片在已知容器中的垂直居中和水平居中，一直是困扰大家的问题，今天西西带给大家一个简单的实现办法，详见css文件，此代码兼容各个浏览器，源码库推荐下载！

    CSS解决页面图片水平垂直居中问题的方法

    有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中，实现也是相当的方便，唯一...

    css图片垂直居中 css中如何实现图片垂直居中

    在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的...

    css实现一个容器的水平垂直居中-兼容所有的浏览器

    不同的浏览器对水平和垂直居中的不同体现，兼容所有浏览器的终极方法

    懒人原生纯css实现多行文字均保持垂直居中效果

    在实际网页中，如何实现如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？ 实现的关键是把文字当图片处理。 用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性...

    jquery.valign插件实现图片,文字上下左右垂直居中

    今天特意在网上找到了一款插件--jquery.valign，可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果，使用方法： 1、调用jquery库以及本插件 2、jquery方法调用，如本案例第22、23行 使用说明：  外侧...

    CSS让高度不确定图片垂直居中的几种技巧

    下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img...

    div+css有实例,易学易懂

    6.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题 6.3.4 容器的大小和内容大小均未知的水平和垂直居中 6.3.5 修饰图片的水平和垂直居中 6.4 字体的综合属性 6.4.1 字体的选择 6.4.2 字体的大小 6.4.3 字体的...

    div图片垂直居中 如何使div中图片垂直居中

    “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。 题目的难点在于两...

    4个简单图片垂直居中

    Div与CSS布局，最让人头疼的就是容器内的东西如何垂直居中的问题， 兼容IE火狐 更多网页制作问题请关注：http://tinycss.blog.163.com/

    让图片垂直居中的使用方法

    “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。 题目的难点在于两...

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

    想必写css的都知道如何让单行文字在高度固定的容器内垂直居中，但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢？本文将会告诉你如何实现多行文字的垂直居中显示。关于图片垂直居中显示，想必很...

    CSS设置未知大小图片在已知大小容器水平垂直居中

    复制代码代码如下: &lt;!...未知大小图片在已知大小容器水平/垂直居中&lt;/title&gt; &lt;style type=”text/css”&gt; .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; ve

    深入理解CSS行高line-height与文本垂直居中的原理

    前言在CSS中，line-height 属性设置两段段文本之间的距离，也就是行高，如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了，比如下面的例子： 复制代码代码如下:&lt;!DOCTYPE ...

    CSS教程：网页图片垂直居中的使用技巧

    “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。 题目的难点在于两...

    利用css样式实现表格中字体垂直居中的方法

    利用css样式实现表格中字体垂直居中的方法，具体代码如下所示： 有一个自定义表格如下所示，当所返回数据改变时，文字都能自动居中  //html //用两个div做容器 &lt;div class=subject1&gt;{{item.subject1}} /...

    css实现的让图片垂直居中的方法

    图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项目可能会用到这个方案，所以把一些常用的方法都收集整理了一下。

    css让容器水平垂直居中的7种方式

    主要为大家详细介绍了css让容器水平垂直居中的7种方式,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Magicbox
Global site tag (gtag.js) - Google Analytics