Differences

This shows you the differences between two versions of the page.

--- tips:button_align [2017-05-27 22:00] – 88.78.7.121
+++ tips:button_align [2022-06-29 14:42] (current) – [Example of how to modify CSS] Better description Michaelsy
@@ Line 2: / Line 2: @@
 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:
@@ Line 12: / Line 15: @@
 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:
@@ Line 17: / Line 23: @@
 <code css>
 .dokuwiki form.bureaucracy__plugin button {
-    display = block;
+    display: block;
-    margin = auto;
+    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
+----
+\\