css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)
一、原始的居中方法是把div换成table
<div style="width: 500px; height: 200px; border: solid 1px red; text-align: center">
<img src="http://www.baidu.com/img/baidu_jgylogo3.gif" /></div> <div style="width: 500px; height: 200px; border: solid 1px red;"> <center> <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" /> </center></div><table style="width: 500px; height: 200px; border: solid 1px red; text-align:center"> <tr> <td> <img src="http://www.baidu.com/img/baidu_jgylogo3.gif" /> </td> </tr></table><!doctype html>
<html><head><meta charset="utf-8"><title>图片垂直水平居中</title><style>div{height:500px;width:400px;text-align:center;border:1px solid #000;margin:20px auto;}img{vertical-align:middle;} /* 关键代码 */span{height:100%;display:inline-block;vertical-align:middle;} /* 关键代码 */</style></head><body> <div> <img src="http://img.o571.com/fc/ad/20130827161606949.jpg" width="323" height="215" /> <span></span> </div></body></html>css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)的更多相关文章
- css 实现文字图片垂直对齐
给图片使用vertical-align:middle;就可以实现 <!DOCTYPE html> <html lang="en"> <head> ...
- IE浏览器中overflow:hidden无效，内层元素超出外层div的解决方法
原文地址:http://www.xin126.cn/show.asp?id=2624 在用css布局的时候,用IE浏览器(ie6.ie7.ie8)预览,有时候会出现内层元素(内部DIV.图片等)超出外 ...
- Js配合CSS实现的图片居中
CSS图上居中很好实现,但万恶的浏览器之间各不相让,搞的不兼容,还好我们有让其兼容的办法,那就是结合JS来实现,这样各个浏览器都听话多了.本例就是CSS结合JavaScript实现的图片垂直.水平方向 ...
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法？）
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- 问题2：css图片、文字居中
1. 文本或图片水平对齐:父元素中添加以下样式 text-align : center;2. 单行文字垂直对齐:父元素中添加以下样式 line-height : 父元素高度; 3.图片 ...
- 如何使用css来让图片居中不变形 微信小程序和web端适用
图片变形很多人祭奠出了妖魔鬼怪般的各种大法,比如使用jq来写,或者使用css表达式来写.今天我总结的是使用css3来写,唯一最大缺点就是对一些浏览器版本不够兼容.下面就是关于如何使用css来让图片居中 ...
- 使图片相对于上层DIV始终水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何让图片相对于上层DIV始终保持水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于用css实现文本和图片垂直水平居中
关于用css实现文本和图片垂直水平居中 一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...
随机推荐
- 如何在django-filter中用choice field 的 value 值过滤对象
如果我们有这样一个model: class IPInfoModel(models.Model): TYPE_INTRANET = 1 TYPE_INTERNET = 2 IP_TYPES = ( (T ...
- JAVA版StarDict星际译王简单实现
由胡正开发的星际译王是Linux平台上很强大的一个开源的翻译软件(也有Windows版本的)支持多种词库.多种语言版本.尤其词库设计比较合理.之前看到一篇博文<星际译王词库应用-自制英汉词典&g ...
- VS2010解决闪退的方法
VS2010解决闪退的原因 前言 在利用vs2010编译器进行编写程序的时候程序结果无法看到,针对上述问题有如下两个解决方法: 方法1. 在程序结束之前(return之前)加 system(&quo ...
- 解决请求中的post、get乱码问题以及响应的乱码问题
post: get: response:
- spyder崩溃修复
实验室突然断电,重启电脑后spyder崩溃 在anaconda命令行中输入命令失败 StackOverflow上找的解决方案,适合win10系统,简单粗暴 在win10搜索里面找,点一下就自动修复了
- 【高软作业2】：Java IDE调研分析
一 序言 随着软件项目开发需求的增多,拥有一款优秀的.顺手的IDE(Integrated Development Environment)对程序员来说显得格外重要.本文就Java程序开发,选择了3款I ...
- Spark 读 Hive（不在一个 yarn 集群）
方法一 1. 找到目标 Hive 的 hive-site.xml 文件,拷贝到 spark 的 conf 下面. 在我的情况下 /etc/hive/conf/hive-site.xml -> / ...
- 严重: Exception loading sessions from persistent storage
2011-11-24 10:05:00| 分类: java学习|举报|字号 订阅 当tomcat启动的时候出现下面错误: [ERROR] org.apache.catalina.sessio ...
- freemarker技术入门例子（结合struts2）
由于最近项目里面要求要使用freemarker技术来做展现层,所以在网上搜索了好多资料,基础知识是看了李刚原来写的那本<struts2权威指南>.一直想在网上找一个很基础的例子来入门,但是 ...
- 物联网学习笔记——构建RESTFul平台1
0.前言 前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我 ...