盒子
文章目录
  1. 原理
  2. 一步步实现效果
    1. 图片和外框
    2. 垂直效果
    3. 居中及其他
    4. 缺点
  3. 最后放上完整的代码
  4. 参考

图片的垂直居中

这是一种兼容性很好,结构简单的垂直居中。结论党想直接看代码可以点击这里。

原理

inline-block元素可以设置vertical-align属性。并且可以和block元素一样设置宽高,但又具有inline元素不换行的特性。

简单的来说,就是行内的块元素。

关于inline-block更详细的原理,可以点击 这里了解更多。

一步步实现效果

图片和外框

首先有一个固定宽高的外框,里面是一张200*200的图片

css

1
2
3
4
5
.img_center{
width:300px;
height:300px;
border:1px solid #ccc;
}

html

1
2
3
<div class="img_center">
<img src="path/to/xx.img" alt="img"/>
</div>

效果

垂直效果

接下来首先是要实现图片的垂直效果,然后一个inline-block元素并没有任何意义。所以现在需要添加一个辅助的inline-block

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.img_center{
width:300px;
height:300px;
border:1px solid #ccc;
}

.img_center_before, .img_center:before{
content:" "
;

display:inline-block;
height:100%;
vertical-align: middle;
width:2px; /* 设置宽度是为了效果更直观*/
background-color: red; /* 设置背景色是为了效果更直观*/
}
.img_center{
max-width:100%;
max-height:100%;
vertical-align: middle;
}

html

1
2
3
4
<div class="img_center">
<div class="img_center_before"></div> <!-- ie低版本不支持伪元素 -->
<img src="path/to/xx.img" alt="img"/>
</div>

效果如下

居中及其他

垂直搞定了,那居中怎么办?很简单,在.img_center中增加text-align: center即可

等等,两个inline-block中间的间隙是什么鬼?

这个是浏览器渲染了空白符号,去掉的方法有很多。在这里我推荐使用最简单的:只要在.img_center中添加一行”font-size:0px”即可。

最后来只要把 .img_center_before中的width和background-color删去就ok了。

最终的效果:

用这种方法,图片可以是任何比例的矩形,也不需要限制大小(可以大于外框)。

缺点

1,外框的高度是必须要固定的。 (一下篇讲会说到在响应式中要如何处理,届时将会详细描述,外框的宽度按照屏幕宽度的百分比,高度和宽度相等的情况下要如何处理)

就目前而言我自己知道的缺点只有这一个,如果你发现了新的问题,欢迎提出来,我再想办法改进~

最后放上完整的代码

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.img_center{
width: 300px; /** @todo */
height: 300px; /** @todo */
border: 1px #ccc solid; /** @todo */
text-align: center;
font-size: 0px;
}



.img_center_before{
content: " ";
display: inline-block;
vertical-align: middle;
height: 100%;
}


.img_center img{
max-width:100%;
max-height:100%;
vertical-align: middle;
}

html

1
2
3
4
5

<div class="img_center">
<div class="img_center_before"></div>
<img src="path/to/image" />
</div>

参考

inline-block 前世今生

How to vertically align an image inside div
(最高票的答案)