DIV里面的图片水平与垂直居中的方法
<div class=“box”>
<img />
</div>
水平居中的常用方式:
text-align:center ——这可以实现子元素字体,图片的水平居中。
margin:0 auto —— 这是针对块元素的水平居中方法
垂直居中的常用方式:
vertical-align: middle;——这个垂直居中属性,只对 inline 或者 inline-block 元素有效。
这里没考虑flex的垂直居中的用法
div中图片水平和垂直居中方式:
第一种方式:直接手动计算的方式。已知box的高度和图片的高度
.box{
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
}
img{
width: 80px;
height: 80px;
padding-top: 110px;
}
备注:这种方式是:用box的高度减去图片的高度再除以2,就是padding-top的值,当然也可以使用margin-top,这样也可以实现图片在div里垂直居中。水平居中就用 text-align: center; 就行了。
第二种方式:图片已知宽高
img{
position:relative;
top:50%;
left:50%;
margin-top:负图片height的一半;
margin-left:负图片width的一半;
}
第三种方式:图片未知宽高,box最好固定高度。
img{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
备注:如果不固定,自适应高度的话,图片估计会跑到div的上面一点。这种是使用css3的方式来实现水平垂直居中,当然兼容性的话,不支持transform就不支持这种方式了
第四种方式: 把box当做单元格,box的宽高可不用设置,让图片自己扩张也行。这种方式box的宽高最好固定。当然不固定也能实现效果。
.box{
width: 300px;
height: 300px;
vertical-align: middle;
text-align: center;
display: table-cell;
border: 1px solid red;
}
备注: display: table-cell 相当于是把标签元素当作一个单元格来处理。唯一的缺点就是IE6/7不兼容。
第五种方式:使用table来达到水平垂直居中的效果。table的宽高已知
html:
<table class="img_meng_show">
<tr>
<td>
<img src="">
</td>
</tr>
</table>
css:
.img_meng_show td{
vertical-align: middle;
text-align: center;
}
DIV水平和垂直居中的方法:
第一种方式:
HTML:
<div class="box></div>
css:
.box{
position:absolute(或者是fixed);
top:;
left:;
bottom:;
right:;
margin:auto;
width:100px;
height:200px;
}
这个能实现div垂直和水平居中,但是必要条件就是宽高必须加上,margin也必须加上。如果想里面的图片也水平和垂直居中,可以参照上面图片用margin-left这种方式;
如果只想垂直居中,只要top与bottom,然后 margin:auto 0;
同理,只想水平居中,只要top与bottom,然后 margin: 0 auto;
但是这种方法不支持ie8以下。
第二种方式:
使用css3 translate的方法,也能让div垂直水平居中:
.box{
position: fixed(或者absolute);
top: 50%;
left: 50%;
width: 100px;
/*height: 100px;*/高度可以不定死
background: skyblue;
transform: translate(-50%,-50%);
}
如果是div中的div,即
<div class="out">
<div class="in"></div>
</div>
这种结构,也可以参考图片在div中水平和垂直居中的方式实现。只是块元素的水平居中的话 text-align: center; 要换成 margin: 0 auto;
DIV里面的图片水平与垂直居中的方法的更多相关文章
- DIV或者DIV里面的图片水平与垂直居中的方法
<div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...
- 使图片水平并垂直居中的一个Hack
淘宝的一个前端面试题:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中. 想起了vertical-align:middle;但是不行,后来才知道还要di ...
- 让DIV中的内容水平和垂直居中
让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这 ...
- 如何让DIV相对于body水平和垂直居中
我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...
- css设置图片水平及垂直居中
.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:cen ...
- js脚本控制图片水平与垂直居中
使用方法: 1.定义ResizeImg(obj)方法 function ResizeImg(obj) { var boxHeight = $(".box").height(); v ...
- css 水平、垂直居中
水平居中 行内元素 行内元素:(img.span.文字等行内元素),通过在父级元素设置 text-align:center 使元素水平居中. 块级元素 块级元素:(div.p.h1...h6.ul.l ...
- css样式水平居中和垂直居中的方法
水平居中(包含块中居中) 1. 定宽,左右margin为auto.(常规流块盒.弹性项目[不用定宽]) 例子:在box1盒子上设置宽,再设置margin:auto: <style> .bo ...
- CSS实现图片在div a标签中水平垂直居中
CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...
随机推荐
- 5. Effective Java 第三版——使用依赖注入取代硬连接资源
Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...
- 主从DB与cache一致性
本文主要讨论这么几个问题: (1)数据库主从延时为何会导致缓存数据不一致 (2)优化思路与方案 一.需求缘起 上一篇<缓存架构设计细节二三事>中有一个小优化点,在只有主库时,通过" ...
- 十、 Spring Boot Shiro 权限管理
使用Shiro之前用在spring MVC中,是通过XML文件进行配置. 将Shiro应用到Spring Boot中,本地已经完成了SpringBoot使用Shiro的实例,将配置方法共享一下. 先简 ...
- InfluxDB:cannot use field in group by clause
最近在使用InfluxDB时,发现一个很奇怪的问题,一个本来正常的功能,做了一次改动后,就不能正常显示了. 一.查询语句 SELECT MEMORY FROM "ACM_PROCESS_MO ...
- adobe acrobat x pro破解版
adobe acrobat x pro破解版是Adobe官方出品的PDF文档全能解决方案套件. PDF文件格式是Adobe公司设计的,用其公司开发的Adobe Acrobat X Pro来创建.编辑. ...
- IEEE1588协议简介
IEEE1588协议,又称PTP(precise time protocol,精确时间协议),可以达到亚微秒级别时间同步精度,于2002年发布version1,2008年发布version2. IEE ...
- sqlserver 存储过程 分页搜索查询
具体调用实例见代码最后一行注释区域 --if exists(select * from sysobjects where id = object_id(N'page_search') and type ...
- iOS 写给iOS开发者的React Native学习路线(转)
我是一名iOS开发者,断断续续一年前开始接触React Native,最近由于工作需要,专职学习React Native也有一个多月了.网络上知识资源非常的多,但能让人豁然开朗.迅速学习的还是少数,我 ...
- 开源一个上架 App Store 的相机 App
Osho 相机是我独立开发上架的一个相机 App,App Store地址:https://itunes.apple.com/cn/app/osho/id1203312279?mt=8.它支持1:1,4 ...
- NSQ之粗读浅谈
回顾: 以前一直是C++开发(客户端),最近听同事讲go语言不错,随后便决定先从go语法开始投向go的怀抱.由于历史原因学习go语法时,用了半天的时间看完了菜鸟教程上相关资料,后来又看了易百教程上的一 ...