不确定宽度和高度图像中垂直中心的CSS样式

不确定宽度和高度图像中垂直中心的CSS样式
本文主要介绍了div中的图像是垂直居中的,以及CSS样式是如何在宽度和高度不确定的情况下编写的。

最简单的方法是设置外部元素的CSS属性:

复制代码代码如下所示:
div {
显示:表单元格;
}

但IE6 / 7不支持CSS样式,并可以使用以下方法适合他们。

HTML的结构如下:

复制代码代码如下所示:
CSS代码如下所示:

复制代码代码如下所示:
div {
宽度:100px;
身高:100px;
边境:1px solid # CCC;
}
跨{
线高度:100%;
垂直对齐:中间;
显示:内联块;
身高:100%;
}
img {
宽度:100%;
垂直对齐:中间;
}

通过设置这些属性来实现下图的效果,画面是垂直居中的部

该方法的原理是将在img标签前空span标签,用它来打开DIV线高度100%。

tag:图像不确定宽度样式高度

相关内容