====== How to align a <button> element? ======

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


==== Variant 1 ====

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

<code css>
.dokuwiki form.bureaucracy__plugin fieldset {
   text-align: center;
}
</code>

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


==== Variant 2 ====

An alternative without side-effects on other elements and with more flexibility is to redefine <button> to a block element ((By default the display-property of a button tag is 'inline'.)) und than you can apply the margin property. The following CSS rule centered only the button and nothing else:

<code css>
.dokuwiki form.bureaucracy__plugin button {
    display: block;
    margin: auto;
}
</code>

----

==== Example of how to modify CSS ====

Small CSS changes like this can be made via the [[plugin:advanced|Advanced plugin]]. It must be installed first.

The Advanced plugin edits the file __''[[devel:css#user_styles|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:
            * <file>
/*_____https://www.dokuwiki.org/tips:button_align____ */
.dokuwiki form.bureaucracy__plugin button {
    display: block;
    margin: auto;
}
</file>
            * **Purge CSS Cache**
    * **Touch** Configuration 
    * **CTRL+F5** - to refresh the browser where you expect the buttons to be centered

----

\\