显示标题覆盖图像垂直向下的页面

我有4张图片，我有字幕覆盖。我希望图像一个接一个地在页面下面。例如

Image
Image
Image
Image

问题是，现在，这是两张照片并排贴在一起，下面有一个空白，另外两张照片并排贴在一起。例如

ImageImage
ImageImage

我想这可能是我的CSS，但我不知道是哪个部分造成的。

下面是我的代码: CSS:

div.image {
float: left;
position: relative;
}
div.descript {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background:rgba(0, 0, 0, 0.6);
font-size:24px;
color: white;
}
p.content {
padding:10px;
margin:0;
}
.image .center {
display: inline-block;
vertical-align: middle;
height: 100%;
}

HTML:

<style>
img {
display:block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class='image'>
<div class="center"></div>
<img src="images/batman.jpg" alt="HTML5 Icon"    style="width:576px;height:365px;">
<div class='descript'>
    <p class='content'> Batman </p>
</div>

还有3个类似于"蝙蝠侠"的街区，但图像不同。

谢谢!

将整个CSS替换为以下内容:

div.image {
    display: block;
    }
div.descript {
    position: relative;
    bottom: 0px;
    left: 0px;
    width: 576px;
    background:rgba(0, 0, 0, 0.75);
    font-size:24px;
    color: white;
    margin-top: -50px;
    }
p.content {
    padding:10px;
    margin:0;
    }
.image .center {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 100%;
    }

相关内容

最新更新

热门标签：