Fieldset Legend - Centre

by Neil Murray

HTML

<fieldset>
    <legend>Center</legend>
    <input type="text" placeholder="foo" />
</fieldset>

<fieldset>
    <legend align="center">Center</legend>
    <!-- The align attribute of <legend> is not supported in HTML5. -->
    <input type="text" placeholder="bar" />
</fieldset>

<fieldset class="relative">
    <legend><span>Center</span></legend>
    <input type="text" placeholder="span" />
</fieldset>

<fieldset>
    <legend class="absolute">Center</legend>
    <input type="text" placeholder="absolute" />
</fieldset>

CSS

legend {
    text-align: center;
}

fieldset.relative {
   	position: relative;
}

legend span {
    text-align: center;
}

legend.absolute {
    position: absolute; 
    left: 50%; 
}