我正在使用 WordPress NextGEN Gallery 将固定宽度的图像放置在流动宽度内 <aside>
.我希望图像与 <aside>
的右侧对齐容器,但如果我尝试将它们正确 float ,顺序就会颠倒过来。我也不能简单地颠倒 WordPress 中图像的顺序,因为图像的列数因浏览器窗口而异。
有没有办法让这些图像在不 float 的情况下右对齐?我试过设置 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;
}
最佳答案
不确定您是否可以在您的代码中执行此操作,但是如果您将 img
包装在 p
中并设置 text-align
p
,一切顺利。
<p><img src="" /></p>
p{text-align:right;}
关于php - 正确对齐图像而不 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6638597/