html - 在字段集中的元素顶部显示标签

Question

我正在尝试使用字段集在元素下方显示标签。我正在车把模板中执行此操作。我遍历图像及其名称并在图像下方显示名称。我做不到。请帮助。以下是我需要显示的方式

IMG1                     IMG2

image1 name             image2 name



<fieldset style="text-align: center;border:1px solid #CCC;display:inline;padding- top:0.25em;vertical-align:middle;">
   <legend class="devHealth"> Temperature</legend>{{#tempdevicesHealth}}
   <img style="width:50px;height:50px;margin: 0 30px;" src="{{DeviceImg}}"      alt="{{Hovertxt}}" title="{{Hovertxt}}"/>
  <br/>
   <label style="font-weight: bold">{{DeviceTitle}}</label>{{/tempdevicesHealth}}</fieldset>

Answer 1

在表格中设置图片和图片标题：jsfiddle.net/XP5ZV

根据您的要求更改 css，如果您想添加更多图像，请在表格中再添加一列。

HTML

<fieldset style="">
<legend class="devHealth">Temperature</legend>
    <table>
        <tr>
            <td>
                <img style="" src="http://lorempixel.com/50/50" alt="{{Hovertxt}}" 
                    title="{Hovertxt}"/>
            </td>
            <td>
                <img style="" src="http://lorempixel.com/50/50" alt="{{Hovertxt}}" 
                    title="{Hovertxt}"/>
            </td>
        </tr>
        <tr>               
           <td>
                <label style="">{{Title}}</label>
            </td>
            <td>
                <label style="">{{Title}}</label>
            </td>
        </tr>  
    </table>
</fieldset>

CSS

.fieldset{
    border:1px solid #CCC;
    display:inline;
    padding-top:0.25em;
    vertical-align:middle;
    text-align: center;
}

.label{
    position:absolute;
    display: inline;
    left: auto;
    margin-left: 50px;
    font-weight: bold;
    text-align: center;
}
.img{
    width:50px;
    height:50px;
    margin-left:30px;
    margin-right:30px;    
}

fieldset table tr td label {
    font-weight: bold;
    text-align: center;
}