2

how can I align the lightning-icon and lightning-formatted-text horizontally? TIA

 <div id="variants" class="slds-p-vertical_x-small">                                
                            <lightning-icon icon-name="utility:info" alternative-text="Info!" variant="info"
                                title="info variant small" size="small"> </lightning-icon>
                            <lightning-formatted-text class="slds-form-element__label slds-no-flex" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat[![enter image description here][1]][1]"></lightning-formatted-text>

1 Answer 1

6

Try something like this

 <div id="variants" class="slds-p-vertical_x-small slds-grid slds-grid_vertical-align-center">                                
    <lightning-icon icon-name="utility:info" alternative-text="Info!" variant="info" class="slds-col"
    title="info variant small" size="small"> </lightning-icon>
    <lightning-formatted-text class="slds-form-element__label slds-col" value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat[![enter image description here][1]][1]"></lightning-formatted-text>
 </div>

I removed your slds-no-flex from formatting-text, because the easiest solution I know is to wrap into slds-grid and add vertical align

You must log in to answer this question.

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