Office UI Fabric verticle align middle not working
-
08-02-2021 - |
Pregunta
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?
Solución
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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a sharepoint.stackexchange