关于div中图片水平垂直居中的问题
最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示
我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用
关键核心代码如下:
<div style="width:400px;height:400px;border:1px solid red;display:table-cell;">
<img src="01.jpg" style="vertical-align:middle;" />
</div>
不要问我为什么,因为我也不明白为什么!哈哈哈,也希望哪一位大神可以帮我解开心里的问题
关于div中图片水平垂直居中的问题的更多相关文章
- CSS中图片水平垂直居中方法小结
写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...
- DIV以及图片水平垂直居中兼容多种浏览器
纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈 第一种:全CSS控制 ...
- div+css:div中图片垂直居中
div中图片垂直居中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- 图片水平垂直居中(兼容IE6,IE7,firefox,opera,safari,其中图片可以是任何块元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css实现图片水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [转]如何让div中的内容垂直居中
转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...
随机推荐
- What's Dead & Exploded in Swift's exception stack?
The Swift compiler marks function arguments for a number of reasons, mostly related to internal opti ...
- Windows环境下制作MACOS X U盘安装盘
前两天在朋友的MAC BOOK AIR上胡乱操作时把原来安装好的双系统搞坏了,一不小心又把硬盘格式化了,导致MAC系统也没了,于是只能重新安装MACOS系统,并根据网友提供的教程,在MACOS安装OK ...
- elasticsearch的mapping
PUT /website/article/1 { "post_date": "2017-01-01", "title": "my ...
- 【Tool】Augmentor和imgaug——python图像数据增强库
Augmentor和imgaug--python图像数据增强库 Tags: ComputerVision Python 介绍两个图像增强库:Augmentor和imgaug,Augmentor使用比较 ...
- MAVN(自动创建maven项目骨架) 项目架构的生成
1.Maven的项目架构生成 A.打开DOS命令窗口选定文件的更跟目录 B:输入命令 mvn archetype:generate C:根据提示输入对应的标识 如图: 最后提示 SUCCESS 即为 ...
- Hive sql
1.DDL操作 1.1 建表 CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name data_type [COMMENT col_ ...
- 如何构建通用 api 中间层
零.问题的由来 开门见山地说,这篇文章是一篇安利软文~,安利的对象就是最近搞的 tua-api. 顾名思义,这就是一款辅助获取接口数据的工具. 发请求相关的工具辣么多,那我为啥要用你呢? 理想状态下, ...
- Linux进程间通信--进程,信号,管道,消息队列,信号量,共享内存
Linux进程间通信--进程,信号,管道,消息队列,信号量,共享内存 参考:<linux编程从入门到精通>,<Linux C程序设计大全>,<unix环境高级编程> ...
- 使用LeNet训练自己的手写图片数据
一.前言 本文主要尝试将自己的数据集制作成lmdb格式,送进lenet作训练和测试,参考了http://blog.csdn.net/liuweizj12/article/details/5214974 ...
- Spring学习总结(17)——Spring AOP权限管理
每个项目都会有权限管理系统 无论你是一个简单的企业站,还是一个复杂到爆的平台级项目,都会涉及到用户登录.权限管理这些必不可少的业务逻辑.有人说,企业站需要什么权限管理阿?那行吧,你那可能叫静态页面,就 ...