Problem with Button Alignment

  • HI,
    I have a number of pages with link buttons, with the buttons centre aligned on the page. When, however, I have added a new buttons block the new button no longer aligns to the centre – it becomes left aligned. This is even with selecting centre alignment both in the Buttons block and the button itself.
    I have tried converting the old individual buttons to the new ‘Buttons’ block but this just made matters worse.
    Also on this example page the final two buttons still align centre even though they have the same settings as all the others that are aligning left.
    I have tried both Chrome and Edge browsers with the same result.
    Also in the editor they align centre – it is only on the live pages they don’t appear to work.
    Please help me to resolve.
    Thank you.
    Adrian.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Well, I can’t really help you with the WordPress editor, but in looking at your code, I can tell you what’s actually happening!

    The buttons ARE centred within their container, but the problem is that the container is the same size as the button, so you can’t see it.

    The buttons that look centred have a container that is the width of the entire line. The ones that don’t have small containers, and the line they are on is broken up into smaller containers.

    Working:

    <div class="is-layout-flex wp-block-buttons">
    <div class="wp-block-button aligncenter is-style-outline">

    Not working:

    <div class="is-content-justification-center is-layout-flex wp-container-3 wp-block-buttons">
<div class="wp-block-button aligncenter is-style-outline">

    You see those extra classes “is-content-justification-centre” and “wp-container-3” (or “wp-container-2” on some) – those need to be removed. I’m not sure how you can do this in the editor, but if there is an HTML view you can just remove from there.

    Thread Starter MurnaghanAP

    (@murnaghanap)

    Hi,
    Thank you for these details – I can see the difference in the code but don’t know how this has been created by the editor or how I can fix it.
    Unfortunately, if I try to edit the HTML in the editor it crashes the block.
    I hope that someone will be able to identify the issue with the editor and advise on how to edit this (and my other pages with the same issue).
    Adrian.

    lisa

    (@contentiskey)

    *For the display of “Contact the Organizer” which appears to be centered when I view in chrome browser…
    BUTTONS SETTING – does not use the center styling
    BUTTON SETTING- does use the center styling

    *Review the settings for BUTTONS and BUTTON for the display that does not appear centered. (editing the HMTL is possible to fix the display, but not recommended)

    *Suggestion: delete the links that are not displaying as you desired and start with a new BUTTONS block. You can also DUPLICATE the BUTTONS block that is working well and change the text and links.

    You can duplicate a block in the “list view” area

    List View

    Thread Starter MurnaghanAP

    (@murnaghanap)

    Hi Lisa,
    Thanks for the suggestions.
    I tried creating new button blocks from scratch but couldn’t get them to centre align (even when centre aligned in the editor).
    I would really like to understand what I may be doing wrong creating new buttons and whether the Buttons Place holder or the button itself should be centre aligned.
    Subsequently I did successfully duplicate the one that still worked to create buttons that work.
    Thanks again for everyone’s support – please let me know if anyone has a solution for this.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Problem with Button Alignment’ is closed to new replies.

Tags