Vertical Alignment of Button in Grid Column

cssformattinginputfieldlightning-web-componentsslds-grid

In my Lightning Grid one of the columns contains an Input Field and the one next to it contains a button.
Ideally I would like the button icon to align vertically with the input field and horizontally on the Left
I have tried all of the standard SLDS classes with no success. slds-align_absolute-center fixed the vertical alignment, but not the horizontal.
I created a custom class in my css but this did not work either.

HTML

<lightning-card class="my-card slds-card_boundary slds-m-top_small" title="Expected Compensation" icon-name="custom:custom41">
  <div class="slds-grid slds-wrap">
      <div class="slds-col slds-size_1-of-3">
          <lightning-input-field field-name="ExpectedBaseLow__c" onchange={handleChange}></lightning-input-field> 
          <lightning-input-field field-name="ExpectedBonusLow__c" onchange={handleChange}></lightning-input-field> 
          <lightning-input-field field-name="ExpectedEquity__c" onchange={handleEquityChange}></lightning-input-field>
      </div>
      <div class="slds-col slds-size_1-of-3">
          <lightning-input-field field-name="ExpectedBaseHigh__c" onchange={handleChange}></lightning-input-field> 
          <lightning-input-field field-name="ExpectedBonusHigh__c" onchange={handleChange}></lightning-input-field> 
          <lightning-input-field field-name="ExpectedExpectedPayoutLow__c" onchange={handleEquityChange}></lightning-input-field>
      </div>
      <div class="slds-col slds-size_1-of-3 slds-align-bottom">
          <lightning-input-field field-name="ExpectedExpectedPayoutHigh__c" onchange={handleEquityChange}></lightning-input-field>
      </div>
      <div class="slds-col slds-size_2-of-3">
          <lightning-input-field field-name="ExpectedEquitySummary__c" onchange={handleEquityChange} value={expectedEquitySummary}></lightning-input-field>                         
      </div>
          <div class="slds-col slds-size_1-of-3">
          <div class="col-button slds-clearfix ">
              <lightning-button-icon icon-name="utility:retweet" onclick={handleSetEquitySummary} value="Expected"></lightning-button-icon>
          </div>
      </div>
      <div class="slds-col slds-size_1-of-1">
          <lightning-input-field field-name="OtherCompensation__c" onchange={handleChange}></lightning-input-field>
      </div>
  </div>
</lightning-card>

CSS

.col-button {
    text-align: left; 
    vertical-align: middle; 
}

enter image description here

Best Answer

It happens because all other input elements have label except the lightning-button-icon. You can modify these kinds of elements like this just by adding an empty label and a couple of SLDS classes:

  <div>
        <label class="slds-form-element__label"></label>
        <lightning-button-icon icon-name="utility:retweet" 
                               onclick={handleSetEquitySummary} 
                               value="Expected"
                               class="slds-form-element slds-form-element_stacked">
        </lightning-button-icon>
  </div>
Related Topic