`

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三角形、居中、圣杯布局

    DIV+CSS上下左右绝对居中

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

    css3块元素居中

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

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

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

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

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

    CSS 设置图片最大尺寸

    CSS 设置图片的最大显示宽高,还保持图片不变形,支持ie,firefox,chrome等浏览器.

    图片 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开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...

    summernote图片居中显示

    通常,Summernote默认的样式可能并不包括图片居中这一选项。描述中提到的"本身不具有图片居中显示"意味着在原生的Summernote配置下,插入的图片会按照其HTML属性(如float或display)来定位,而不是居中对齐。为了...

    css水平居中4种方式

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

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

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

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

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

    纯css实现div容器内图片上下左右居中效果

    一款不需要任何JS即可控制图片上下左右居中的效果 以前以为必须要JS才能控制...使用方法简单:图片外围包含两个容器即可,并设置图片宽度以及高度,如果是动态读取的话,则需要程序传递一个图片的高度以及宽度即可。

Global site tag (gtag.js) - Google Analytics