How to center align input field labels in Fluent Forms

By default labels in input fields of Fluent Forms is left aligned. There is a no default option to center align but it can be achieved easily with a few lines of CSS code. Ideally, center align of labels would look odd from the user experience perspective. However, if you still want them center align, here goes.

CSS for all forms

Open your style.css file or navigate to Theme Customizer -> Additional CSS section and add this CSS.

CSS for a specific form

For making this change in a specific form, use the following CSS code.

Take note of the extra CSS element #fluentform_2 before the .ff-el-input–label CSS class name, where 2 is my form ID. You would need to replace this with the ID number of Fluent Form you are working with.

Share this Tutorial

Leave a Comment