3

I have the following component code that I am trying to use to center a button on a page. It keeps showing left-aligned. I have tried using <center> tag and slds-align_absolute-center. Neither change the left alignment I am seeing.

<div class="slds-form-element buttons slds-text-align_center">
    <lightning:button class="slds-button slds-button--brand"  variant="brand" onclick="{!c.createNew}" label="{!v.ButtonLabel}" aura:id="formSubmit"/>
</div>
4
  • try this class class="slds-align_absolute-center"
    – Pavan tej
    Commented Oct 18, 2019 at 11:49
  • I just tried it again & it did not work. Still left-aligned. Commented Oct 18, 2019 at 11:53
  • I figured it out. I had to remove class="slds-form-element" in order for the center class to work. Commented Oct 18, 2019 at 12:03
  • I thought you have removed already!. I will post my answer please close the question
    – Pavan tej
    Commented Oct 18, 2019 at 12:11

1 Answer 1

4

In order to align a button in the center. we need to use the Absolute Center class in slds positioned.

<div class="slds-align_absolute-center" style="height:5rem">
    <lightning:button />
</div>

For more information: https://www.lightningdesignsystem.com/utilities/alignment/

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .