不定宽的图片水平垂直居中

如何让不定高和不定宽的图片水平垂直居中在某一个定高定宽的容器中呢，请听我细细到来。

现在有很多浏览器（如chrome，部分ie,firefox,opera等）都支持display：table，display：table-cell，让图片水平垂直居中就很简单了，给外部容器加一个display：table和vertical-align:middle，text-align：center属性，图片给display：table-cell属性，就可以实现水平垂直居中。

当然，并不是所有的浏览器（如ie6,等）都不支持display：table-cell以及display：table属性，这样的浏览器就得用其他的方法实现水平垂直居中了。搜了很多方法，发现了很神奇的用font-size可以实现图片的水平垂直居中，将外部容器的font-size给一个和外面容器本身高度差不多的值，即可实现图片的水平垂直居中。

ps：如果容器中不只是图片，还有其他的文字这个方法就不合适了。

时间： 2024-11-07 08:43:23

不定宽的图片水平垂直居中的相关文章

不定宽高的水平垂直居中

不定宽高的水平垂直居中的两种方法: 1/ .mybox{position:absolute;top:50%;left:50%;z-index:3;-webkit-translate(-50%,50%);background:#fff;} 2/.parent{justify-content:center;align-items:center;display:-webkit-flex;}

不定宽高盒子水平垂直居中的写法

1. width: 1200px;     height: 600px;     position: absolute;     left: 50%;     top: 50%;     transform: translate(-50%,-50%); 2. width: 1200px;     height: 600px;     position: absolute;     left: 50%;     top: 50%;     margin:-300px 0 0 -600px:

未知宽高图片水平垂直居中在div

<BODY> <div class="box"> <span class="car"></span> <img src="images/01.jpg" title="car" /> </div> </BODY> .box { width: 100%; overflow: hidden; text-align: center; /*font-si

高宽不定图片水平垂直居中

图片水平垂直居中的两个常用方法: 1.Table-cell. IE8+及标准浏览器利用display:table-cell让容器以表格元素的方式呈现,配合vertical-align和text-align实现内部图片水平垂直居中. IE67不支持display:table-cell,可用font-size,值为容器的0.875倍做hack. html,body,p, div { margin: 0; padding: 0; } .wrap { height: 300px; width: 300p

CSS未知宽高元素水平垂直居中

方法一 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(parent)可以动态的改变高度(table元素的特性)缺点:IE8以下不支持 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>未知宽高元素水平垂直居中&l

图片水平垂直居中

效果仅见:http://runjs.cn/detail/tkid13aj <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> body{ margin:0; padding:0;} dl,dt,dd,img{ margin:0; paddin

HTML-img图片水平垂直居中。

<style> .box{ width:800px;height:800px;border:1px solid #000; text-align:center;}//水平居中 span{ display:inline-block; height:100%; vertical-align:middle;}//垂直居中 img{ vertical-align:middle;}//垂直居中 </style> </head> <body> <div class

网页元素居中攻略记_(3)已知宽高元素水平垂直居中

已知宽高元素水平垂直居中 方案 使用了position的absolute属来实现,在上篇文章的垂直居中的基础上加上水平居中 代码 index.html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>已知宽高元素水平垂直居中</title> <style> #container { posit

未知宽高的图片水平垂直居中的几种方法

最近在项目中遇到不固定宽高的图片要水平垂直居中的情况,发现垂直居中存在兼容性问题,下面收集了一些方法,可根据需要权衡使用. 1. 背景法(兼容性好,简单,但不利于动态导入的图片) html: <div class="wrap"></div> css: .wrap{ width:300px; height:200px; background: url(../img/test.jpg) center center no-repeat; } 2. 图片外面用个p标签,