如何让一个行内元素(如一张图片)在div中居中
2017-09-15 00:02
537 查看
(1)第一种:用vertical-align
(2)第二种:flex布局(注意浏览器兼容性)
(3)position:absolute;绝对定位方式
(4)使用display:table-cell配合vertical-align:center(淘宝也是这样用的)
<div class="method1"> <span class="tiptop"></span> <img class="test" src="img/Dota2.jpg" alt="dota2"> </div> <style> .method1{ text-align:center; } /*vertical-align:middle 是依赖div内子元素最高的行高来实现对某元素居中的,而我们只需要建立一个新元素,给他加上inline-block属性 再把他高度设置为100%就行了,在下面的<img>设置vertical-align就生效了*/ .tiptop{ height:100%; display:inline-block; vertical-align:middle; } img{ vertical-align:middle; } </style>
(2)第二种:flex布局(注意浏览器兼容性)
<div class="method2"> <img src="img_p1_title.png"> </div> <style> .method2 { display: flex; justify-content: center; //弹性盒子对象在主轴上的对齐方式 align-items: center; //定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 background-color:#00a0e9; height:200px; } .method2 img { width:20px; height:30px; background-color:#0A58A0; } </style>
(3)position:absolute;绝对定位方式
<div class="method3"> <span>第三种方法</span> </div> <style> .method3 { width:100%; height: 200px; font-size: 18px; position: relative; background-color:#00a2d4; } .method3 span { width:100px; height:100px; background-color:#00ACED; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>
(4)使用display:table-cell配合vertical-align:center(淘宝也是这样用的)
<div class="method4"> <span>第四种方法</span> </div> <style> .method4 { width: 200px; height: 200px; vertical-align: middle; display: table-cell; /*只支持IE8+及现代浏览器,与position:absolute;或float:left;属性尽量不一起用*/ text-align: center; background-color:#00ACED; } .method4{ width:100px; height:100px; background-color:#0A58A0; } </style>
相关文章推荐
- 当内嵌元素和图片一起在一个div里设置line-height时,出现不同时居中的情况
- 假如有一个固定高度的div,如何让里面的一个图片垂直居中?
- 我有个DIV层,里面放一张图片,我如何让这张图片水平和垂直方向都居中呢???
- 如何居中div?如何居中一个浮动元素?
- 父元素为一个div,宽度高度不固定,子元素是一个块状元素,宽高已知,如何实现子元素在父元素内水平、垂直居中?
- 如何用一张图片做背景图,并且图片自适应div的大小
- css 宽高自适应的div 元素 如何居中 垂直居中
- 如何使一个div在另一个div中绝对居中(水平与垂直方向)
- 前端面试题 - 如何居中一个float:left的元素
- 用Javascript往一个Div中插入一张图片
- 如何使一个绝对定位的元素居中显示
- 如何使一个div在某个元素的相对位置出现
- css怎么将一张图片在另一个元素中垂直居中
- 使用CSS让DIV,图片等元素居中
- 如何让图片相对于上层DIV始终保持水平、垂直都居中
- 如何居中一个设置了浮动的元素
- 文字或图片元素在DIV中垂直居中
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
- 如何将一个BMP图片画在TPanel的中间(也就是让图片居中)用这个API(DrawDibDraw)画图片?谢谢!
- Web开发教程--如何让图片在div中垂直居中