I have found and adjusted a css to manage image alignment. It works as expected on preview but does not in live preview. How to adjust it to work the same in live preview as well. Thanks.
CSS Code :
/*image-align css*/
/* Sourced from lithou
https://github.com/Lithou/Sandbox/blob/main/.obsidian/snippets/pub-Image%20Flags.css*/
table{
width: auto;
display: table;
}
.grid span.image-embed[alt*="."], span[alt*="grid"]{
display: table-cell;
vertical-align: middle;
padding: 3px;
}
img[alt*="grid"], .grid img[alt*="."]{
max-height: 30vh;
}
/* Floating Images */
img[alt*="left"] {
float:left;
clear:left;
margin-right: 1rem;
margin-bottom: 4px;
margin-top: 4px;
}
img[alt*="right"] {
float:right;
clear:right;
margin-left: 1rem;
margin-bottom: 4px;
margin-top: 4px;
}
img[alt*="center"],img[alt*="centre"] {
display:block;
margin-right: auto;
margin-left: auto;
margin-bottom: 4px;
margin-top: 4px;
}
img[alt*="circle-l"] {
float:left;
clear:left;
margin-right: 1rem;
margin-bottom: 4px;
margin-top: 4px;
border-radius: 50%;
width: 100px;
height: 100px;
object-fit: cover;
}
img[alt*="circle-r"] {
float:right;
clear:right;
margin-left: 1rem;
margin-bottom: 4px;
margin-top: 4px;
border-radius: 50%;
width: 100px;
height: 100px;
object-fit: cover;
}
img[alt*="circle"] {
display:block;
margin-right: auto;
margin-left: auto;
margin-bottom: 4px;
margin-top: 4px;
height: 300px;
width: 300px;
object-fit: cover;
border-radius: 50%;
}
/*FigCaption*/
.figcaption {
font-size: 100%;
text-align: center;
color: var(--text-muted);
margin-right: 0.5rem;
margin-left: 0.5rem;
}
div .figcaption#left, div .figcaption#right, div .figcaption#centre, div .figcaption#center{
display: flex;
justify-content: center;
}
.figcaption#left {
clear: left;
float: left;
}
.figcaption#right {
clear: right;
float: right;
}
.figcaption#centre, .figcaption#center {
margin-left: auto;
margin-right: auto;
}
Source Mode :
<i class="figcaption" id="left" style="width:400px">Test Image</i>
*False Darkens the Heart and Truth Nourishes the Heart.*
<br>
==May It Be Blessed==
<br>
**Lorem Ipsum** is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
**Lorem Ipsum** is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Preview is as Expected :
Live Preview looks Odd :
It would be a great help, If this is corrected.
