CSS-布局【1】-图片在div中垂直居中
方法一：通过增加100%高度行内块居中对齐
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<style type="text/css">
div{
width: 600px;
height: 220px;
text-align: center;
border: 1px solid red;
} span{
height: 100%;
display: inline-block;
vertical-align: middle;
} img{
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<span></span><img src="demo.jpg">
</div>
</body>
</html>
方法二：通过table/table-cell样式居中
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<style type="text/css">
div{
width: 600px;
height: 220px;
text-align: center;
border: 1px solid red;
display: table;
} span{
display: table-cell;
vertical-align: middle;
} img{
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<span><img src="demo.jpg"></span>
</div>
</body>
</html>
方法三：设置为背景图片居中
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<style type="text/css">
div{
width: 600px;
height: 220px;
text-align: center;
border: 1px solid red;
background-image: url('demo.jpg');
background-repeat: no-repeat;
background-position: center;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
CSS-布局【1】-图片在div中垂直居中的更多相关文章
- 尺寸不固定的图片在div中垂直居中并完全显示
前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...
- 让图片在DIV中垂直居中
window.onload=function(){ var img = document.getElementById("imgdiv"); var div = document. ...
- 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中
单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i>&l ...
- CSS布局总结及实际应用中产生的问题
布局初步 所谓布局,其实是指的将网页内容以一定的方式放到合适的位置上去. 布局的基本步骤: 1, 将“当前版面”以视觉上界限明显的方式进行划分若干个区块,划分只用两种方式: a) 上下结构:此时,只要 ...
- 未知行数的文字在div中垂直居中
今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...
- 设置span在div中垂直居中
转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...
- 随机图片大小在DIV中垂直居中对齐总结
老遇到这种样式 现在总结一下 <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type&quo ...
- 让图片在div 中居中的方法
方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...
- 未知高度的图片在div设置垂直居中
方法一: 该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用ve ...
随机推荐
- 简易qq对话框
//本程序由QT5 creator编译可运行 //dialog.h 1 #ifndef DIALOG_H #define DIALOG_H #include <QDialog> class ...
- webservice 简单入门 (NLY)
1,创建webservice服务器端 搭建网站,创建webservice webservice.cs中的代码 namespace WebApplication1 { /// <summary&g ...
- EasyUi–7.tab和datagrid和iframe的问题
1. 多个tab切换,第2个不显示 动态添加tab Iframe页面的方法 展开 折叠 <script type="text/javascript"> $(functi ...
- jquery.query.js 插件（示例及简单应用）
帮助文档 var url = location.search; > "?action=view§ion=info&id=123&debug&te ...
- SVN 搭建
http://www.blogjava.net/jasmine214--love/archive/2010/09/26/332989.html http://hunan.iteye.com/blog/ ...
- 手机的ROM，RAM是各自存放什么？所谓“运行内存”和“机身内存”究竟有什么区别？
手机的内存分为运行内存(RAM)和非运行内存(也叫机身内存.储存空间.ROM) 1.手机的内存,分为存储内存和运行内存,相当于电脑的硬盘和内存条.2.存储内存分为机身内存和存储卡.3.rom是存储内存 ...
- ckplayer视频播放插件使用
研究ckplayer插件播放视频,播放视频需要配置信息修改如下: 1.设置ckplayer.js中的logo: 'null' 可以隐藏视频播放头部的图标: 2.设置ckplayer.js中的ckcpt ...
- wp8 入门到精通 Animation 背景加字体颜色从下向上变化颜色效果
<phone:PhoneApplicationPage.Resources> <Style x:Key="ButtonStyle1" TargetType=&qu ...
- ThinkPHP3.2判断手机端访问并设置默认访问模块的方法
ThinkPHP3.2判断是否为手机端访问并跳转到另一个模块的方法 目录结构 公共模块Common,Home模块,Mobile模块 配置Application/Common/Conf/config.p ...
- hdu 5294 最短路+最大流 ***
处理处最短路径图,这个比较巧妙 链接:点我