以下是使得图片在<div>中水平和垂直居中的两种方法:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DIV水平及垂直居中</title>
<style>
/* 方案1 */
.img-box
{
width: 400px; line-height: 300px;
border: solid; border-width: thin; border-color: rgb(0, 255, 0);
text-align: center;
float: left;
}
.img-style-big
{
width: 360px; height: 270px;
vertical-align: middle;
}
/* 方案2 */
.img-table
{
display: table;
width: 1280px; height: 240px;
border: solid; border-width: thin; border-color: rgb(0, 0, 255);
}
.img-row
{
display: table-row;
width: 100%; height: 100%;
border: solid; border-width: thin; border-color: blue;
}
.img-cell
{
display: table-cell;
width: 25%; line-height: 240px;
text-align: center;
border: solid; border-width: thin; border-color: cyan;
}
.img-style-small
{
width: 240px; height: 180px;
margin: auto;
vertical-align: middle;
}
</style>
</head>
<body>
<!-- 方案1:可使得三个图片在同一行,且各自在框中水平和垂直居中。但是当浏览器窗口变窄时,右边的图框会自动移动到下一行。 -->
<!-- 适用于Chrome、Firefox、IE 8+ -->
<div style="display: table; border: solid; border-width: thick; border-color: rgb(255, 0, 0); padding: 4px;">
<div class="img-box">
<img src="img/007.jpg" class="img-style-big" />
</div>
<div class="img-box">
<img src="img/007.jpg" class="img-style-big" />
</div>
<div class="img-box">
<img src="img/007.jpg" class="img-style-big" />
</div>
</div>
<!-- 方案2:可使得三张图片在同一行,且各自在框中水平和垂直居中。当浏览器窗口变窄时,布局不会发生变化,浏览器地步会出现滚动条。 -->
<!-- 适用于Chrome、Firefox、IE 8+ -->
<div class="img-table">
<div class="img-row">
<div class="img-cell">
<img src="img/007.jpg" style="width: 240px; height: 180px; margin: auto; vertical-align: middle;" />
</div>
<div class="img-cell">
<img src="img/007.jpg" class="img-style-small" />
</div>
<div class="img-cell">
<img src="img/007.jpg" class="img-style-small" />
</div>
<div class="img-cell">
<img src="img/007.jpg" class="img-style-small" />
</div>
</div>
<div class="img-row">
<div class="img-cell">
<img src="img/007.jpg" style="width: 240px; height: 180px; margin: auto; vertical-align: middle;" />
</div>
<div class="img-cell">
<img src="img/007.jpg" class="img-style-small" />
</div>
<div class="img-cell">
<img src="img/007.jpg" class="img-style-small" />
</div>
<div class="img-cell">
<img src="img/007.jpg" class="img-style-small" />
</div>
</div>
</div>
</body>
</html>
当浏览器窗口足够宽时,方案1(上半截3张大图)、2(下半截8张小图)的展示效果如下图所示:
当浏览器窗口变窄时,方案1的效果如下图所示:
可以发现,最右边的图片自动移到了下一行。
而方案2的效果如下图所示:
可以发现图片的位置并未随着浏览器窗口的变化而变化,浏览器出现了滚动条。