yii2 图像在图像下方有一个标签答案

【问题标题】：yii2 Image to have a label below the imageyii2 图像在图像下方有一个标签
【发布时间】：2016-08-04 22:53:30
【问题描述】：

在 yii2 中，我显示来自数据库的图像，对于相同的图像，我在数据库表中有 cmets。我希望图像描述位于图像下方，这是我无法实现的。

我的代码。

<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>

我的输出是：

我无法获得图片下方的标签。谁能建议我这里有什么问题？

谢谢你..

【问题讨论】：

标签： image yii2 yii2-basic-app

【解决方案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;
}

猜猜这对你有帮助

【讨论】：