對齊圖像沒有浮動

我正在使用WordPress NextGEN圖庫來定位寬度爲<aside>的固定寬度圖像。我希望這些圖像與<aside>容器的右側對齊，但如果我嘗試將它們正確地浮起來，則順序會顛倒過來。我不能簡單地顛倒WordPress中圖像的順序，因爲圖像列數隨瀏覽器窗口而變化。對齊圖像沒有浮動

有沒有辦法將這些圖像向右對齊而不會將它們浮動？我試過在每張圖片及其容器上設置text-align:right，但沒有任何效果。

PHP/HTML：

<!-- Thumbnails --> 
    <?php foreach ($images as $image) : ?> 

    <div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> > 
     <div class="ngg-gallery-thumbnail" > 
      <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> > 
       <?php if (!$image->hidden) { ?> 
       <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> /> 
       <?php } ?> 
      </a> 
     </div> 
    </div>

CSS：（主要來自NextGen的畫廊繼承）

.ngg-galleryoverview { 
    overflow: hidden; 
    clear:both; 
    display:block !important; 
    float:right; 
    text-align:right; 
    margin-top:18px; 
    width:100%; 
} 

.ngg-galleryoverview .desc { 
/* required for description */ 
    margin:0px 10px 10px 0px; 
    padding:5px; 
} 

.ngg-gallery-thumbnail-box { 
    display:inline; 
} 

.ngg-gallery-thumbnail { 
    display:inline; 
    text-align: center; 
} 

.ngg-gallery-thumbnail img { 
    display:inline; 
} 

.ngg-gallery-thumbnail img { 
    background-color:#FFFFFF; 
    border:1px solid #A9A9A9; 
    display:block; 
    margin:4px 0px 4px 5px; 
    padding:4px; 
    position:relative; 
    float:left; 
}

來源

2011-07-10 daysrunaway

不知道，如果你可以在你的代碼做到這一點，但如果你包裹在img一個p並設置text-align在p，這一切工作。

<p><img src="" /></p> 

p{text-align:right;}

http://jsfiddle.net/jasongennaro/x3Lx4/

來源

2011-07-10 01:51:43

替代地設置'顯示：塊;'和'文本對齊：右;'爲標籤包裝圖像。 –

這可以通過將'text-align：right'設置爲'.ngg-galleryoverview'來實現，但現在任何單獨在其行中的項目（即最後的圖像及其容器）也都對齊。有沒有辦法對齊左側的圖像，但容器是正確的？ – daysrunaway

你可以顯示截圖或鏈接嗎？ –

對齊圖像沒有浮動

回答

相關問題