Office UI Fabric verticle align middle not working

Question

I am trying to make my image vertically aligned in middle using CSS which is not working in Office UI Fabric.

My HTML Code:

<div class="ms-Grid" dir="ltr">
    <div class="ms-Grid-row">
        <div class="ms-Grid-col ms-sm6 ms-md4 ms-lg6">
            <h1 class='ms-fontColor-sharedGreen10'>Be Connected</h1>
        </div>
        <div class="ms-Grid-col ms-sm6 ms-md8 ms-lg6 ms-u-textAlignRight">
            <img src='${this.logo}' alt="" width="200" height="54">
        </div>
    </div>
    <div class="ms-Grid-row">
        <ul id='main-menu' class='sm sm-blue'>
            ${this.createMenu(null).join('')}
        </ul>
    </div>
</div>

My CSS for img tag:

img {
    vertical-align: middle;
    border-style: none;
}

What is the reason it is not working?

Answer 1

The following example code for your reference.

<div className="ms-Grid" dir="ltr">
    <div className="ms-Grid-row">
        <div className="ms-Grid-col ms-sm6 ms-md4 ms-lg6">
            <h1 className='ms-fontColor-sharedGreen10'>Be Connected</h1>
        </div>
        <div className="ms-Grid-col ms-sm6 ms-md8 ms-lg6 ms-u-textAlignRight" style={{ 
          display: "flex",
          justifyContent: "flex-end",
          alignItems: "center",
          backgroundColor: "blue",
          height:"74.5px"
        }}>
            <img src='https://www.w3schools.com/howto/img_snow_wide.jpg' alt="" width="200" height="54"/>
        </div>
    </div>
    <div className="ms-Grid-row">
        <ul id='main-menu' className='sm sm-blue'>
            test
        </ul>
    </div>
</div>