Add a corporate logo to navbar

[Jim]

Hi - I have a requirement to show our corporate logo from every view, and their preference is to show it in the left-side area of the navbar.  I have it showing up, but it is not vertically centered, and I have tried a number of things. I've tried vertical-align:middle, and margins:auto, but neither have worked so far:

<header data-role="header">
    <div data-role="navbar">
        <img id="corp-logo" src="images/app/corp-logo.png" 
           data-align="left" style="width:120px;height:30px;vertical-align:middle;"/>
        <span data-role="view-title"></span>
    </div>
</header>

and...

<header data-role="header">
    <div data-role="navbar">
        <img id="corp-logo" src="images/app/corp-logo.png"
           data-align="left" style="width:120px;height:30px;margin: auto .3em auto .3em;"/>
        <span data-role="view-title"></span>
    </div>
</header>

What would be preferred approach approach for vertically aligning a logo image within the navbar area?
Thanks, Jim Wangler

[Iliana Dyankova]

Hello Jim,

In order to achieve the desired outcome you could set top margin to the image. For example: 

<img id="corp-logo" src="//...." data-align="left" style="width: 120px; height: 30px; margin-top: .4em"/>

Let me know if this fits your requirements.

Kind regards,

Iliana Nikolova
the Telerik team

[Jim]

Yes, that does it - thanks.