yii2图像在图像下方有标签

Question

在yii2中，我正在显示来自daabase的图像，并且我在数据库表中显示相同的图像。我希望图像描述低于图像，这是我无法实现的。

我的代码。

<div class="margin-top-20">
  <h5>  <p class="details-edit">  <i class="fa fa-picture-o"></i> GHS Pictograms </p> </h5>
    <div class="panel panel-default panel-edit">
        <div class="panel-body">

            <?php 
             $images = '';
             $a = '';
              // append all images
             //  var_dump($data->getPictogramPath()); exit();
            foreach($model->getPictogramPath() as $name)       
                $images =$images.' '.Html::img(\Yii::$app->request->BaseUrl.'/web'.$name->pictogram_filepath,['alt'=>'','width'=>'100','height'=>'100', 'data-toggle'=>'tooltip','data-placement'=>'left','title' => $name->pictogram_comment ,'style'=>'cursor:default;']).Html::label($name->pictogram_comment,['class' => 'pictogram-label']);
                $a = $a.Html::label($name->pictogram_comment);

            echo ($images);
           ?>

        </div>
    </div>

</div>             

我的输出是：

我无法在图片下面找到标签..有人能问我这里的问题是什么吗？

谢谢..

Answer 1

您需要对html结构稍作修改。首先需要在块中包装每个图像和标签，还需要在你的css 文件中进行几次更改。

您的代码将如下所示：

$images = '';
$a = '';

// Append all images          
foreach($model->getPictogramPath() as $name) {
    $images .= Html::beginTag('div', ['class' => 'img-and-label-wrapper']);
    $images .= Html::img(\Yii::$app->request->BaseUrl. '/web' . $name->pictogram_filepath, ['alt' => '', 'width' => '100', 'height' => '100', 'data-toggle' => 'tooltip', 'data-placement' => 'left', 'title' => $name->pictogram_comment ,'style'=>'cursor:default;']);
    $images .= Html::label($name->pictogram_comment,['class' => 'pictogram-label']);
    $images .= Html::endTag('div');
}

echo $images;

此处需要添加的样式：

.img-and-label-wrapper {
  display : inline-block;
}

.img-and-label-wrapper label{
  display: block;
  text-align: center;
}

猜猜这会对你有所帮助