`

CSS设置图片居中的方法【转载】

    博客分类:
  • css
阅读更多

如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中。如果没有应用表格要想设置图片居中就有点困难了。困难来自不按"常规出牌"的浏览器。按照CSS标准,只要设置了图片容器的CSS属性为 display:table-cell;vertical-align:middle;text-align:center;就可以使图片居中了。这个方法在Firefox Chrome Opera Safari都生效,因为它们是标准浏览器。而在IE中就是不行,IE它最牛了。以下是通过IE hack解决这个问题的方法:

<style>
     .box {
     /*非IE的主流浏览器识别的垂直居中的方法*/
     display: table-cell;
     vertical-align:middle;

     /*设置水平居中*/
     text-align:center;

     /* 针对IE的Hack */
     *display: block;
     *font-size:175px;/*约为高度的0.873,200*0.873 约为175*/
     *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

     width:200px;
     height:200px;
     border: 1px solid #eee;
     }
     .box img {
     /*设置图片垂直居中*/
     vertical-align:middle;
     }
</style>

 

分享到:
评论

相关推荐

    DIV+CSS 图片垂直居中效果

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

    CSS 图片水平垂直居中于DIV

    在处理图片居中问题时,通常会用到相对定位和绝对定位的组合。相对定位让元素相对于其正常位置进行偏移,而绝对定位则让元素相对于最近的非 static 定位祖先元素定位。 实现图片水平垂直居中的方法有多种,以下是几...

    CSS网页布局DIV水平居中的各种方法

    CSS 网页布局 DIV 水平居中的各种方法 在现代浏览器中,实现 DIV 的水平居中是一件非常简单的事情。下面我们将详细介绍几种常见的方法。 方法一:使用 margin:auto 这种方法是最简单的,直接将 DIV 的 margin ...

    css三角形、居中、圣杯布局

    css三角形、居中、圣杯布局

    Jsp中如何让图片在div中居中

    在讨论JSP页面中图片居中的问题时,首先需要掌握一些基础的CSS布局知识,包括display属性的使用、垂直居中的方法、margin属性的自动居中技巧以及W3C标准对页面渲染的影响。 当涉及到在div中居中一张图片时,CSS是...

    DIV+CSS上下左右绝对居中

    在网页设计中,"DIV+CSS上下左右绝对居中"是一个常见的布局需求,尤其是在构建响应式网站时。这个主题涉及到CSS(层叠样式表)的布局技巧,它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...

    css3块元素居中

    对于多行文本、图片或块状元素的竖直居中,有以下两种常见方法: #### 方法一:使用`table`标签和`vertical-align:middle` 这种方法涉及创建一个包含`tbody`、`tr`和`td`的`table`结构。通过在`td`上设置`vertical...

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

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

    图片 CSS垂直居中

    图片 CSS垂直居中图片 CSS垂直居中

    css实现垂直居中的方法

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

    css实现图片垂直居中

    用CSS来实现img图片在DIV层中上下左右都居中,并且图片等比例缩放。很实用的

    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;...

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

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

    css水平居中4种方式

    无论是图片、宽度和高度固定的元素,还是自适应的动态元素,都有多种方法可以实现水平居中。以下是标题所提及的“css水平居中4种方式”的详细解析: 1. **Flexbox布局** Flexbox(弹性盒布局)是现代CSS布局的一种...

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

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

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

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

    css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

     原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形。  二、使用布局技术  使用CSS3 圆角技术实现。  使用CSS3样式单词:border-radius  语法:  div{border-radius:5px}  对图片设置...

    图片水平垂直居中

    这种方法需要设置容器为相对定位(`position: relative`),然后将图片设置为绝对定位,并将其`top`和`left`属性设置为50%,再通过负的`margin`值来补偿: 1. HTML结构不变,但需要为容器添加一个额外的类或ID以...

    富文本summernote.js 图片居中

    总的来说,要让Summernote的图片居中显示,可以通过CSS、修改JS源码、自定义按钮或使用扩展插件等方式实现。根据项目需求和你的技术水平,可以选择最适合的方法。请务必注意在修改源码时备份原有文件,以便于后续...

Global site tag (gtag.js) - Google Analytics