`
charrys
  • 浏览: 36292 次
  • 性别: 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图片垂直居中的常见方法。具体选择哪种方法取决于你的项目需求，比如兼容性、布局复杂度等因素。在实际应用中，可能需要根据实际情况调整这些代码，以适应各种浏览器和设备。通过阅读...

    DIV+CSS 图片垂直居中效果

    在网页设计中，"DIV+CSS 图片垂直居中效果"是一个常见的布局需求，它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述： 1. **基础概念** - **DIV**：HTML中的`&lt;div&gt;`元素是一...

    CSS解决未知高度的DIV垂直居中

    ### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...

    图片水平垂直居中

    这样，图片将在其容器内水平和垂直居中。 另外，如果您的项目需要支持较旧的浏览器，可以使用CSS的绝对定位方法。这种方法需要设置容器为相对定位（`position: relative`），然后将图片设置为绝对定位，并将其`top`...

    css图片垂直居中

    以上就是CSS实现图片垂直居中的几种常见方法。在实际开发中，应根据项目需求和浏览器兼容性选择合适的方法。对于老旧的浏览器，可能需要采用更传统的解决方案，如使用`table-cell`或JavaScript辅助。同时，随着技术...

    CSS实现完美垂直居中 - 蓝色理想

    "CSS实现完美垂直居中"这一主题深入探讨了如何利用CSS技术使元素在容器内实现精确的垂直对齐。以下是一些关于这个主题的关键知识点： 1. **单行文本垂直居中**： 对于单行文本，可以使用`line-height`属性来实现...

    CSS 图片水平垂直居中于DIV

    总之，实现CSS中的图片水平垂直居中是一个常见的挑战，但通过理解不同的布局模式和定位方式，我们可以灵活地选择合适的方法来解决这个问题。无论是在简单的网页还是复杂的响应式设计中，这些技巧都将大有裨益。

    jquery图片尺寸调整插件图片垂直居中自适应容器

    插件可能会利用CSS3的Flexbox或Grid布局，或者通过JavaScript计算并设置top值来实现图片在容器内的垂直居中。这样无论图片尺寸如何变化，它始终能保持在容器的中央位置。 具体到这个名为"texiao6624_1560681082"的...

    div+css垂直居中和水平居中

    在网页设计中，实现元素的垂直居中和水平居中是一项常见的需求，这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中，div元素作为布局容器广泛使用，而CSS则是样式控制的...

    网页图片垂直居中

    本文将详细介绍如何实现网页图片的垂直居中，并提供多种方法供参考。 1. **CSS Flexbox** Flexbox是CSS3中的一项布局模式，特别适合处理一维布局，如行或列。要使图片垂直居中，可以创建一个包含图片的容器，并设置...

    js+CSS 图片等比缩小并垂直居中实现代码.docx

    JS+CSS 实现图片等比缩小并垂直居中 在网页开发中，图片的缩放和垂直居中是非常常见的需求，而本文将介绍使用 JS+CSS 来实现图片等比缩小并垂直居中的代码。 首先，在 HTML 中，我们需要定义一个容器元素 `...

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

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

    js按比例缩放图片且垂直居中显示图片

    - **CSS Flexbox**：利用CSS3的Flexbox布局，可以很容易地将图片在容器内垂直居中。只需设置容器的`display: flex`和`align-items: center`属性。 - **CSS Grid**：使用CSS Grid布局，可以设置`align-items: ...

    css设置未知尺寸图片的水平和垂直居中

    以上就是关于使用CSS设置未知尺寸图片在容器中水平和垂直居中的方法。这些技术不仅适用于图片，也广泛应用于其他需要居中显示的元素。通过源码和工具的实践，你可以更好地理解和掌握这些技巧，从而提高网页设计的...

    图层中图片垂直水平居中

    Flexbox是CSS3中引入的一种布局模型，专门用于解决复杂的容器内元素对齐问题。要使图片在图层中居中，可以设置容器的display属性为flex，并使用align-items和justify-content属性来实现垂直和水平居中。 ```css ....

    CSS实现垂直居中的5种方法.rar

    本教程将详细讲解5种有效的CSS方法，帮助你掌握垂直居中的技巧。 1. **Flexbox布局** Flexbox是现代CSS布局模型，特别适合处理容器内子元素的对齐问题。要实现垂直居中，首先设置容器的`display`属性为`flex`，...

    垂直居中.docx

    这种方法适用于单行文字，但是在 Internet Explorer 6 及以下版本中，不支持对图片设置垂直居中。 2. 多行未知高度文字的垂直居中 对于多行文字，可以使用 padding 属性设置上下的 padding 值相同，以实现垂直居中...

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

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

    垂直居中显示ie7+

    在IE7+中实现垂直居中，我们可以采用多种方法，每种方法都有其适用场景和优缺点。以下是一些常见的技术： 1. **CSS Table布局**： - 设置父容器`display: table`，子元素`display: table-cell`。 - 使用`vertical...

    图片的水平垂直居中

    本文将详细探讨如何实现图片在div层的居中，并着重解决垂直居中这一相对复杂的任务，同时考虑浏览器的兼容性问题。 首先，让我们了解基本的CSS布局属性，它们对于实现图片居中至关重要。`margin: auto` 是一种简单...

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