`
un268un
  • 浏览: 11915 次
社区版块
存档分类
最新评论

纯css实现未知大小的图片水平垂直居中的方法

 
阅读更多

  方法一: .box { 
  /*非IE的主流浏览器识别的垂直居中的方法*/ 
  display: table-cell;
  vertical-align:middle; 
  /*设置水平居中*/ 
  text-align:center; 
  /* 针对IE的Hack */ 
  *display: block; 
  *font-size: 262px;/*约为高度的0.873,300*0.873 约为262*/ 
  *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
  width:750px; 
  height:300px; 
  border: 1px solid #777; 
  } 
  .box img { 
  /*设置图片垂直居中*/ 
  vertical-align:middle; 
  } 
   
  Skin/red2009/images/logo. gif" /> 
  
  方法二:   
    
    
    
  未知大小的图片水平垂直居中-  
    
  /* for non-IE browsers */  
  div.holder {width:750px; height:300px; background:#f8f8f8; border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}  
    
    
    
  /* vertical align for IE */  
  #edge {width:0;background:red; height:100%; display:inline-block; vertical-align:middle;}   
  #container {text-align:center; width:100%;font-size:0;display:inline-block; vertical-align:middle;}  
    
    
    
    
  Skin/red2009/images/logo. gif" alt="" />  
    
   
分享到:
评论

相关推荐

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

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

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

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

    未知大小的图片自适应水平垂直居中源码纯CSS

    未知大小的图片 垂直居中,水平居中,纯CSS。兼容主流浏览器。

    DIV+CSS 图片垂直居中效果

    综上所述,"DIV+CSS 图片垂直居中效果"可以通过多种方法实现,具体选择哪种取决于项目需求、浏览器兼容性和响应式设计的需求。在提供的`index.html`、`images`和`css`文件中,我们可以看到实际的代码应用和图片资源...

    DIV水平垂直居中

    总之,实现`div`的水平垂直居中有多种方法,包括CSS的Flexbox、Grid、绝对定位等,以及JavaScript/jQuery的动态调整。选择哪种方法取决于项目需求和浏览器兼容性要求。在实际开发中,通常会结合使用这些技术来达到...

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

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

    CSS 实现未知内容高度的垂直水平居中(改良版)

    垂直居中在IE浏览器下的实现比较难实现,而更难实现的应该是未知内容高度的垂直水平居中!还好网上也有很多高人发布了一些解决的方法!这里我进行了一些改良,兼容FF,IE6,IE7,Opera…如发现问题有劳回复评论! ...

    css实现垂直居中

    以下是一些主要的CSS技术,它们可以帮助你实现"css实现垂直居中": 1. **Flexbox布局** Flexbox是现代CSS布局模式,特别适合处理容器内子元素的对齐问题。要实现垂直居中,可以设置容器的`display`属性为`flex`,...

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

    总结来说,这个解决方案通过CSS实现了未知大小的图片在已知大小容器内的水平垂直居中,同时通过JavaScript进行图片尺寸的适配,确保图片不会溢出容器。这种方法兼容了不同浏览器,提供了良好的用户体验。

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

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

    对未知高度的图片设置垂直居中的方法详解

    本文将详细介绍几种不同浏览器下实现未知高度图片垂直居中的方法,并特别关注在IE浏览器中的表现。由于IE浏览器的兼容性问题,可能需要针对不同版本的IE采取特定的解决办法。 首先,对于标准浏览器,可以通过将外部...

    css实现垂直居中的方法

    ### CSS 实现垂直居中的五种方法 在前端开发中,如何使元素在页面中垂直居中是一项常见的需求。本文将详细介绍五种不同的方法来实现这一目标,并对每种方法的特点进行分析,以便开发者根据实际情况选择最合适的方案...

    CSS2.1如何让块元素垂直水平居中.rar

    对于水平和垂直居中,`display: flex`或`display: grid`在CSS3中非常有用,但在这里我们将专注于CSS2.1的解决方案。 ### 已知宽高块级元素的居中方法: 1. **使用绝对定位**: - 设置父元素`position: relative;`...

    垂直居中.docx

    在 CSS 中实现垂直居中有多种方法,这些方法可以应用于不同的场景。本文将总结几种常用的 CSS 垂直居中方法。 1. 单行垂直居中 对于单行文字,可以使用设置高度和行高相等的方法实现垂直居中。这种方法简单易行,...

    html中对文本实现垂直居中的方法

    这种简单有效的方法在多数现代浏览器中表现良好,但在IE6及以下版本中,此方法不支持图片的垂直居中。因此,在设计跨浏览器兼容的页面时,需额外注意。 ### 多行未知高度文字的垂直居中 当文本内容高度不定时,...

    div不定宽高的水平和垂直居中

    综上所述,针对“div不定宽高的水平和垂直居中”以及兼容IE67的需求,我们可以选择使用CSS传统方法(如绝对定位)或者结合JavaScript来实现。考虑到不同的浏览器兼容性和场景适应性,应根据实际项目需求来选择最合适...

    使用css实现div垂直居中的示例

    总结来说,这个示例展示了两种CSS方法来实现`div`元素的垂直居中: 1. 对于包含文本的`div`,通过设置`text-align: center`和合适的`line-height`实现文本的垂直居中。 2. 对于需要整体居中的`div`,使用`position:...

    css 未知高度元素绝对居中

    对于未知高度元素的垂直居中,可以设置父容器的`display`属性为`flex`,然后使用`align-items: center;`来实现垂直居中。例如: ```css .parent { display: flex; align-items: center; } ``` 2. **Grid布局...

    用CSS将登录框水平垂直居中于浏览器.pdf

    本文将详细解析如何使用CSS将登录框水平垂直居中于浏览器窗口。 首先,我们要明白CSS中的定位机制。在CSS中,我们可以使用`position`属性来设置元素的定位方式,主要有`static`(默认值)、`relative`、`absolute`...

Global site tag (gtag.js) - Google Analytics