centering variable-width block elements

[1. Luftballon]

(line numbers are copy-pasta leftovers.)

   126 .bl-c {
   127   margin-left: auto;
   128   margin-right: auto;
   129 }

    26 <form method='get' action='?' class='bl-c'>
    27   <input type='text' name='one' value='{{= eschtml param 'one' }}' />
    28      
    29   <input type='text' name='two' value='{{= eschtml param 'two' }}' />
    30   <input type='hidden' name='d' value='$nmver' />
    31   <input type='submit' value='Do' class='boring' />
    32 </form>

(ignore the values and stuff.)

I'd like to center the form without having to define a width.

 

[Phoenixsong]

As far as I know that's not an option if you're centering with margin: auto. If you can't just define the form's width with a percentage, though, you can try some of the advice I found here. I imagine that if those'll work for a div they'll work for any other block-level element.

 

[1. Luftballon]

huh. input and textarea are inline elements. that's just... I really should have checked earlier. what other common block elements are there that might need to be centered?

 

[Phoenixsong]

Oh, well, yeah. If all you needed to have centered was the elements within the form, just text-align: center right in the rule for that class works.

I'm not sure what you're asking with the second question; what you would and wouldn't center seems pretty variable depending on what you're trying to achieve.

 

[1. Luftballon]

seems none of the block elements are worth centering, really. so.

I meant if there were any block elements that somebody could conceivably center while keeping its width variable.

 

[Phoenixsong]

Other than container divs in some sort of layout I'm not sure there's much reason to, but, again, I'm relatively sure that inline-block and the other similar suggestions would make it possible to. I haven't had any need to do that myself so I wouldn't know from experience.