修改

Question

修改

我应该说我有多个图像，我试图连续放置。 mdk提供的解决方案有效，但每个图像都出现在新行上。

我有描述和图像。我在图像上覆盖了描述。目前它在图像的底部左对齐。我想让描述在水平和垂直方向都居中对齐，但我很难这样做。使用的图像大小为320 x 240。

    <!-- image -->
        <div style="position: relative; left: 0; top: 0;">


    <a href="test.html"> <img src = "test.png" style="position: relative; top: 0; left: 0; width: 320px;"></a>

        <!-- description div -->
        <div class='description'>
            <!-- description content -->
            <p class='description_content'>This is the description of the image</p> 
            <!-- end description content -->
        </div>
        <!-- end description div -->

    </div>
    <!-- end image div -->

</div>
<!-- end wrapper div -->

的CSS

div.wrapper{
    float:left; /* important */
    position:relative; /* important(so we can absolutely position the description div */ 
    padding: 5px;
}
div.description{
    position:absolute; /* absolute position (so we can position it where we want)*/
    bottom:0px; /* position will be on bottom */
    left:0px;
    /* styling bellow */
    background-color:black;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size:18px;
    font-weight:900;
    color:white;
    opacity:0.75; /* transparency */
    filter:alpha(opacity=70); /* IE transparency */
}
p.description_content{
    padding:10px;
    margin:0px;
}

Answer 1

如果图像总是大小相同，则可以使用css top属性而不是底部，例如

div.description{
                top:130px;
                text-align:center;}

Answer 2

这是一个解决方案，使用display：table在包装器上显示同一行上的两个图像，并在显示中显示：table-cell。然后，您可以使用vertical-align：middle将文本垂直居中。使用垂直对齐比设置顶部要好，因为将顶部设置为固定量不会考虑描述中的多行。

这是一个工作小提琴：http://jsfiddle.net/manishie/WSzE2/

<强> HTML

<div class="wrapper">
    <a href="test.html"> <img height=240 width=320 src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYm7nE5wc8NLS4tY4zzx-kamyn656ziK8Ma9fnmZLDASZS6oya4g"></a>
    <div class='description'>
        <p class='description_content'>This is the description of the image</p> 
    </div>
</div>

<div class="wrapper">
    <a href="test.html"> <img height=240 width=320 src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQYm7nE5wc8NLS4tY4zzx-kamyn656ziK8Ma9fnmZLDASZS6oya4g"></a>
    <div class='description'>
        <p class='description_content'>This is a multi line description of the image. abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc </p> 
    </div>
</div>

<强> CSS

div.wrapper{
    float:left; /* important */
    display: table;
    width: 320px;
    height: 240px;
}
div.wrapper img {
    position: absolute;   
    z-index: -100;        
}

div.description{
    display: table-cell;
    vertical-align: middle; /* to vertically center */
    text-align: center; /* to horizontally center */
}
p.description_content{
    color: white;
    background: grey;
}

如何在垂直和水平方向上对齐图像顶部的描述？

修改

的CSS

2 个答案: