日志
首页 > Blog > 技术笔记 > 正文

CSS巧用display:table实现图片垂直居中

在自适应网页设计中,鉴于div元素宽度常常使用百分百,高度通常未知,但是却需要将div中的文字图片元素垂直居中,下面是使用display的table、table-cell属性实现这一效果,纯CSS即可实现。以下是html实例:其中table是容器,cell是容器内放图片文字的。css代码如下:

在自适应网页设计中,鉴于div元素宽度常常使用百分百,高度通常未知,但是却需要将div中的文字图片元素垂直居中,下面是使用display的table、table-cell属性实现这一效果,纯CSS即可实现。

以下是html实例:

<div class="table">
    <div class="cell">
        <img src="1.jpg">
    </div>
</div>

其中table是容器,cell是容器内放图片文字的。css代码如下:

.table{
    display: table;
    width: 50%;
    height: 50%;
}
.cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

这样.cell即可撑满.table实现垂直居中,.table可以随意设置宽度和高度,而对.cell设置宽高度是无效的,也不能设置float或position,不然会破坏布局。

本网网址:http://www.bogoor.com/code/84.html

网友评论
发表评论