html - 在边框上添加文本

Question

所以我在边框内有一个图像和一些文本。我想就边界本身发表意见，但我似乎找不到办法。

我的 HTML

<div class="img">
        <img src="https://imagizer.imageshack.us/v2/321x396q90/661/oUF8n3.jpg" align="left" height=400px width=400px alt="sliced">
        <div class="text">
            Calibre: From 1 up to 5 mm <br>

            Packing: jute or polypropylene bags , Vacuum & Carton <br>

            Usage areas: It is used as the raw material for processed and fully processed hazelnuts, etc. <br>
        </div>
        <h2> Sliced </h2>
</div>

CSS

.img {
   float: left;
   border-style: solid;
   border-width: 2px;
   border-color: 24AB36;
   padding: 20px;
}

我希望标题 2 在边框上。

我该怎么做？

Answer 1

如果你想要边框上的文字，你可以使用fieldset

SEE DEMO

<fieldset>
    <legend>Title Text</legend>
       CONTENT HERE
</fieldset>

HTML:

<fieldset class="field_set">
    <legend style="text-align: center;"><h2>Sliced</h2></legend>
    <div class="img">
        <img src="https://imagizer.imageshack.us/v2/321x396q90/661/oUF8n3.jpg" align="left" height=400px width=400px alt="sliced">
        <div class="text">
            Calibre: From 1 up to 5 mm <br>

            Packing: jute or polypropylene bags , Vacuum & Carton <br>

            Usage areas: It is used as the raw material for processed and fully processed hazelnuts, etc. <br>
        </div> 
      </div>
</fieldset>

CSS:

.img {
   float: left;
   padding: 20px;
}

.field_set{
    border-width:6px;
    border-color:#F00;
    border-style: solid; 
}