图片完美垂直居中的实现方法：display：table\table-row\table-cell

用户注册

投稿取消

文章分类:

还能输入300字

上传中....

热门文章更多>>

标签更多>>

word左右居中纵向分布 word左右居中对齐 word左右居中对齐怎么设置 word标题回车后为正文 word标题回车后直接分页 word标题回车后中间空了好大一段 word里面行距怎么调整无法缩小 word里面行距一直很大 word里面行距怎么设置在哪里 word试卷格式文档怎么打印 word试卷格式排版 word中隐藏文字打印 word中隐藏文字快捷键 word中隐藏文字在哪里

专题更多>>

最新文章更多>>

无悔以前

图片完美垂直居中的实现方法：display：table\table-row\table-cell

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vertical-align</title>
<style type="text/css">
.container{
width: 300px;
height: 400px;
margin: 50px auto;
border: 1px solid #ccc;
display: table;
}
.img{
text-align: center;
vertical-align: middle;
display: table-cell;
}
img{
width: 260px;
height: 350px;
}
</style>
</head>
<body>
    <div class="container">
        <div class="img">
            <img src="your_image.jpg">
        </div>
    </div>
</body>
</html>