How to align a <button> element?

How to align a <button> element inside a <fieldset> with CSS? (E.g. you use the bureaucracy plugin.)

One way is to set the CSS property “text-align” of a tag which wraps the button tag:

.dokuwiki form.bureaucracy__plugin fieldset {
   text-align: center;
}

But this solution takes effect to other inline elements inside the fieldset (e.g. text) too.

An alternative without side-effects on other elements and with more flexibility is to redefine <button> to a block element ¹⁾ und than you can apply the margin property. The following CSS rule centered only the button and nothing else:

.dokuwiki form.bureaucracy__plugin button {
    display: block;
    margin: auto;
}

Small CSS changes like this can be made via the Advanced plugin. It must be installed first.

The Advanced plugin edits the file userstyle.css and if it does not exist, it is created beforehand. After installing the plugin go to:

• Admin
  • Additional Plugins
    • Advanced Configurations
      • Style
        • Screen
          • Add the following lines:

          • /*_____https://www.dokuwiki.org/tips:button_align____ */
            .dokuwiki form.bureaucracy__plugin button {
                display: block;
                margin: auto;
            }

          • Purge CSS Cache
  • Touch Configuration
  • CTRL+F5 - to refresh the browser where you expect the buttons to be centered