1

I am trying to center this component within a column with css.

enter image description here

this is my code

  <div class="slds-col slds-size_1-of-1 slds-large-size_4-of-12 slds-m-bottom_large">

        <lightning:fileCard aura:id="fileAvatar" fileId="" description="" hideDescription="{!v.disabled}" />
        <lightning:fileUpload name="fileUploader" multiple="false" accept="{!v.filetype}" recordId="{!v.recordId}"
            onuploadfinished="{!c.handleUploadFinished}" />
  </div>

Any help is welcome

1 Answer 1

1

You could try adding slds-align_absolute-center to the col div. eg:

<div class="slds-col slds-align_absolute-center....

Or use some flex magic (the above layouts are flexed too):

<div class="slds-col slds-size_1-of-1 slds-large-size_4-of-12 slds-m-bottom_large" style="display: flex; justify-content: center;">
  <div >
    <lightning:fileCard aura:id="fileAvatar" fileId="" description="" hideDescription="{!v.disabled}" />
    <lightning:fileUpload name="fileUploader" multiple="false" accept="{!v.filetype}" recordId="{!v.recordId}"
        onuploadfinished="{!c.handleUploadFinished}" />
  </div>
</div>
1
  • Edited - moved style to top level, so there is a single div wrapping the file components. It's working properly now. Commented Apr 28, 2021 at 19:24

You must log in to answer this question.

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