[SalesForce] Lightning Design using slds-text-align_center does not allow me to adjust width

I have a nested component and when the parent displays it on a full width page the child expands the entire screen and does not look good. I used "slds-text-align_center" to center it, but then tried to add style in the div to adjust width to 700px. This does not seem to work. If I do the style by itself then the width works, BUT my component is then left justified. Any ideas to center AND get width to 700px?

<div class="slds-text-align_center" >
    <c:AddressVerify/>
</div>

Thanks!
Ryan

Best Answer

Are you trying to position c:AddressVerify in the middle of your parent component with white space on the sides? If so, something like this could help.

<lightning:layout multipleRows="false">
    <lightning:layoutItem size="12" smallDeviceSize="1" mediumDeviceSize="3" largeDeviceSize="3" padding="around-small"/>
    <lightning:layoutItem size="12" smallDeviceSize="10" mediumDeviceSize="6" largeDeviceSize="6" padding="around-small">
        <c:AddressVerify/>
    </lightning:layoutItem>
    <lightning:layoutItem size="12" smallDeviceSize="1" mediumDeviceSize="3" largeDeviceSize="3" padding="around-small"/>
</lightning:layout>
Related Topic