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 ...
随机推荐
- 题解 AT1219 【歴史の研究】
莫队 简单分析:题面含有IOI(惊),可知此题是IOI(数字三角形)难度(逃). 思路:回滚莫队 当然很多人都是抱着学回滚莫队的目标来看这道题的,所以这里介绍一下回滚莫队. 1.按莫队的思路讲询问排序 ...
- 「快学springboot」16.让swagger帮忙写接口文档
swagger简介 官方的介绍 THE WORLD'S MOST POPULAR API TOOLING Swagger is the world's largest framework of API ...
- Python中turtle绘图学习笔记和实例
一.既然本次讲的主角是turtle函数库,那肯定得先了解一下它是什么 turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位 ...
- Linux--add the PPA to your system
Add a PPA to your system with a single line in your terminal step1:on the PPA's overview page,look f ...
- 伪类:after,:before的用法
:after和:before是css3中的伪类元素.用法是像元素的前或者后插入元素.以after为例: li:after{ content: ''; color: #ff0000; } 意思是向li元 ...
- SystemVerilog Assertion 设计、调试、测试总结（1）
暑期实习两个月的其中一个任务是:如何在设计中加入断言?以及断言的基本语法.三种应用场景下的断言(如FIFO.FSM.AXI4-lite总线).参考书籍:<System Verilog Asser ...
- redis列表-list
Redis的list类型其实就是一个每个子元素都是string类型的双向链表,链表的最大长度是2^32.list既可以用做栈,也可以用做队列. 常用命令: 1. lpush key value [va ...
- lambda表达式和for_each，find_if
1 lambda表达式可以允许我传递任意可调用对象,必须要有捕获列表和函数体,标准形式是[捕获列表] (参数列表)->return tpye{函数体} 谓词:一元谓词指的是只能接受一个传入参数, ...
- CentOS 下 安装 nginx 执行配置命令 ./configure 报错
CentOS 下 安装 nginx 执行配置命令 ./configure --prefix=/opt/nginx --sbin-path=/usr/bin/nginx 时提示以下错误: checkin ...
- 098、Java中String类之charAt()方法
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...