1

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?

  • any help will be appreciated – Milind Dec 19 '19 at 5:28
2

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>

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.