`
一只妖娆
  • 浏览: 5229 次
  • 性别: Icon_minigender_2
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

图片垂直居中的方法

CSS 
阅读更多
关于图片垂直居中的方法,无论是baidu还是google,无外乎那五种方法。从五种中选取了一种方法,但是弊端在于 每次写的时候还是要计算它的值。代码如下:
border:1px solid #666;  
display: table-cell;  
vertical-align:middle;        /*设置垂直居中*/ 
*display: block;  
*font-size: 175px;/*约为高度的0.873,*/ 
font-family:Arial;/*当编码为非utf-8的时候设置*/ 
width:200px;  
height:200px; 
   可是忽然发现有的时候这段代码是不管用的。
无奈之下,只得舍弃。寻求了一种新方法,给img下边加一个空span标签。css代码:
<div class="a">
   <img src="images/sy.gif" alt="" />
   <span></span>
</div>
css代码如下:
.a{width:300px; height:350px; line-height:350px; border:1px solid #000; background: #f00; text-align:center;}
.a img{vertical-align:middle;}
.a span{display:inline-block;}
原理很简单,就是给div一个高度,然后加行高,把span标签设为inline-block。
分享到:
评论

相关推荐

    css图片垂直居中方法

    在网页设计中,让图片垂直居中是一项常见的需求,它能...通过阅读提供的文本文件"图片垂直居中2.txt、图片垂直居中3.txt、图片垂直居中1.txt、图片垂直居中4.txt",你可以找到更多示例和解释,深入了解每种方法的细节。

    图片水平垂直居中

    在网页设计中,让图片水平垂直居中是一个常见的需求,特别是在构建响应式布局或需要保持元素在不同屏幕尺寸下居中的场景。本文将详细介绍如何使用简洁的代码来实现这一目标,适用于各种现代浏览器。 首先,我们可以...

    DIV+CSS 图片垂直居中效果

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

    网页图片垂直居中

    以上是实现网页图片垂直居中的六种常见方法。每种方法都有其适用场景,开发者可以根据项目需求和技术支持选择合适的方法。在实际开发中,通常推荐使用Flexbox或CSS Grid,因为它们提供了更好的跨浏览器兼容性和灵活...

    图片水平垂直居中图片水平垂直居中

    图片水平垂直居中 好用 图片水平垂直居中 图片水平垂直居中 图片水平垂直居中

    css图片垂直居中

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

    图片垂直居中样式

    本文将深入探讨“图片垂直居中样式”的实现方法,通过分析给定的代码片段,详细解释其中涉及的关键CSS技术点,以及如何在实际项目中应用这些技巧。 ### 核心知识点解析 #### 1. 相对定位与绝对定位的结合使用 在...

    4个简单图片垂直居中

    在这个"4个简单图片垂直居中"的案例中,我们将探讨几种主流的CSS策略来解决这个问题。 1. **Flexbox布局**: Flexbox是CSS3引入的一种新的布局模式,特别适合处理容器内元素的对齐问题。通过设置`display: flex`,...

    未知图片大小在div里可以垂直居中显示

    任意图片在div里的垂直居中!

    垂直居中.docx

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

    图片的水平垂直居中

    在网页设计中,图片的水平垂直居中是一个常见的需求,特别是在构建响应式布局或需要保持元素视觉平衡时。本文将详细探讨如何实现图片在div层的居中,并着重解决垂直居中这一相对复杂的任务,同时考虑浏览器的兼容性...

    CSS 图片水平垂直居中于DIV

    实现图片水平垂直居中的方法有多种,以下是几种常见且实用的方法: 1. 使用 Flexbox 布局: Flexbox 是现代CSS布局模式,适用于单行或单列的弹性容器。在父容器上设置 `display: flex;`,并使用 `align-items: ...

    图层中图片垂直水平居中

    以上就是实现图层中图片垂直水平居中的几种常见CSS方法。根据实际项目需求和浏览器兼容性,选择合适的方法。在实践过程中,还可以结合媒体查询(media queries)来确保在不同屏幕尺寸下仍能保持良好的居中效果。

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

    "js按比例缩放图片且垂直居中显示图片"这个主题涉及到的是使用JavaScript技术来处理图片的尺寸调整和布局定位,使得图片无论在何种分辨率或屏幕尺寸下都能保持良好的视觉效果。这里我们将详细探讨这一技术实现的原理...

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

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

    在DIV中图片垂直/水平居中(最简单方法).rar

    以上就是使用CSS(特别是Flexbox和Grid布局)以及JavaScript实现图片在div中垂直/水平居中的方法。这些技巧不仅适用于图片,还可以应用于其他类型的元素,提高了网页布局的灵活性和可维护性。在实际项目中,应根据...

    CSS图片垂直居中方法整理集合 !(常见问题解答)

    本文主要针对这一问题,总结了多种实现CSS图片垂直居中的方法,并通过实例代码进行详细解析。 1. **利用绝对定位和负margin** 在第一段代码中,使用了绝对定位和负margin的方法来实现图片垂直居中。首先,外层`div...

    JQUERY图片自动垂直居中水平居中-支持IE678910/chrome/firefox/opera

    明锋工作室整理常用资料。本次资料是一个自动居中插件,只要设定div长度和高度,其中的图片会自动铺满容器并且自动居中。很简单好用。并且该自动居中插件支持IE6、IE7、IE8、IE9、IE10、CHROME、FIREFOX、OPERA。

    图片垂直居中的代码的几种方法

    本文将深入探讨四种不同的CSS方法,用于实现图片在div容器内的垂直居中,每种方法都有其适用场景和独特之处。 ### 第一种方法:使用`table-cell`属性 这种方法的核心在于将div设置为`table-cell`,这样可以使其...

    CSS让图片垂直居中和底端对齐的代码

    本CSS教程提供了两种对齐方式即垂直居中对齐和...CSS使图片垂直居中的代码: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;...

Global site tag (gtag.js) - Google Analytics