Question

The following code will display 3 inline-block elements, collectively centered. I want to display these elements on top of each other, individually centered.

HTML:

<form>
    <fieldset>
        <legend>A box</legend>
        <input type="Submit" name="Submit" value="Submit">
    </fieldset>

    <fieldset>
        <legend>B box</legend>
        <input type="Submit" name="NoOptions" value="No Options">
    </fieldset>

    <span>(Footnote)</span>
</form>

CSS:

fieldset { display:inline-block; }
form { text-align:center; }

I’m pretty sure (not entirely) that inline-block is indeed what I want; I want the fieldsets to be as small as possible (like a block), but I want them to be text-aligned (which only applies to inline stuff). Is there any good way to stack them?

NOTE: These fieldsets may contain block level elements.

Answer 1

As far as I know it’s not possible to size to content, center horizontally and stack vertically with just CSS. I would just wrap a div around each of the elements;

<form>
    <div>
        <fieldset>
            <legend>A box</legend>
            <input type="Submit" name="Submit" value="Submit">
        </fieldset>
    </div>

    <div>
        <fieldset>
            <legend>B box</legend>
            <input type="Submit" name="NoOptions" value="No Options">
        </fieldset>
    </div>

    <div>
        <span>(Footnote)</span>
    </div>
</form>

CSS:

fieldset { display:inline-block; }
form > div { text-align:center; }