編輯

我應該說，我有多個圖像，我試圖把它放在一行。由mdk提供的解決方案有效，但每個圖像都顯示在新行中。如何在圖像的頂部垂直和水平居中對齊說明？

我有一個描述和圖像。我將圖片上的描述疊加在一起。目前它左對齊在圖像的底部。我想讓描述在水平和垂直方向上居中對齊，但是我很難做到這一點。所使用的圖像的大小是320×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; 
}

來源

2012-10-31 sharataka

是圖像總是相同的大小？ –

我現在半睡不着，所以我不想做出正確的答案，但在這裏：http://jsfiddle.net/EWzwy/ –

@ScottSelby是的圖像總是相同的尺寸 – sharataka

如果圖像總是在相同尺寸u可以使用的CSS top屬性，而不是底部例如

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

來源

2012-10-31 06:17:05

下面是一個解決方案，在包裝器上使用display：table和display：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; 
}

來源

2012-10-31 06:54:40 manishie

如何在圖像的頂部垂直和水平居中對齊說明？

編輯

回答

相關問題