Правильное выравнивание изображений без смещения

Я использую галерею 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 Gallery)

.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;
}

wordpress php html css nextgen-gallery
person daysrunaway    schedule 10.07.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Не уверен, что вы можете сделать это в своем коде, но если вы оберните img в p и установите text-align в p, все получится.

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

p{text-align:right;}

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

person Jason Gennaro    schedule 10.07.2011
comment
В качестве альтернативы установите display: block; и text-align: right; для тега ‹a›, обертывающего ваше изображение. - person Darragh Enright; 10.07.2011
comment
Это сработало, установив text-align:right на .ngg-galleryoverview, но теперь любые элементы, которые находятся в одиночестве в своей строке (т. е. последние изображения и их контейнеры), также выравниваются по правому краю. Есть ли способ выровнять изображения по левому краю, а контейнеры по правому? - person daysrunaway; 10.07.2011