It's better when it's simple

User Tools

Site Tools


How to align a <button> element?

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

Variant 1

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. :-(

Variant 2

An alternative without side-effects on other elements and with more flexibility is to redefine <button> to a block element 1) 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;

Example of how to modify CSS

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:
            • /*_____ */
              .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

By default the display-property of a button tag is 'inline'.
tips/button_align.txt · Last modified: 2022-06-29 14:42 by Michaelsy

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki