Question

我正在使用php循环并显示目录中的所有图像。这有效，但我想在每个图像下面添加图像名称。我正在努力让文本在它下面居中，因为它似乎只是将它放在它旁边并且似乎在它自己的列中与图像分开。

我该如何解决这个问题？从研究中我已经完成了一般解决方案似乎将它们放在一个div中，我以前没有做过很多php但是我能够将两个echo语句粘贴在div标签内吗？

            <div id="contentClothing">  
                <?php
                    function hoodie() {
                        $dir    = 'images/clothing/hoodies/small/';
                        $files = scandir($dir);
                        $images = array();
                        foreach($files as $file) {
                          if(fnmatch('*.png',$file)) {
                            $images[] = $file;
                          }
                          if(fnmatch('*.jpg',$file)) {
                            $images[] = $file;
                          }
                        }

                        foreach($images as $image) {
                          echo '<img src="images/clothing/hoodies/small/'.$image.'"width=15% height=20% hspace=2% vspace=2% data-big="images/clothing/hoodies/large/'.$image.'" />';
                          echo '<span>'.$image.'</span>';
                        }
                    }
                ?>
            </div>

这是css

#contentClothing {
    padding-bottom: 5%;   /* Height of the footer element */
    margin-left: 15%;
}

span {
    text-align: center;
}

它的外观http://puu.sh/m8Zh0/6b0da6ec03.png

Answer 1

而不是<span>，请使用<p>标记。将整个图像和文本包裹在<div>标记内，然后将样式应用到其中。

// your code

foreach($images as $image){
    echo '<div style="text-align:center; float:left; clear:right;">';
        echo '<img src="images/clothing/hoodies/small/'.$image.'"width=15% height=20% hspace=2% vspace=2% data-big="images/clothing/hoodies/large/'.$image.'" />';
        echo '<p>'.$image.'</p>';
    echo '</div>';
}   

// your code

使用echo在图像下定位文本

1 个答案: