we here at the WikiWichery may have something... first we must initiate the uninitiated, repeat the ecsoteric words...
Double, double toil and trouble;
Fire burn and caldron bubble.
Tag of code and toe of frog,
Wikitext and tongue of prog,
For a code of powerful trouble,
Like a hell-broth boil and bubble.
then inscribe the code into ye wiki...
<style>.svgiconsbottom svg{width: 1.5em;
height: 1.5em;
margin: 0px;
padding: 0px;
vertical-align:bottom;}
.svgiconsmiddle svg{width: 1.5em;
height: 1.5em;
margin: 0px;
padding: 0px;
vertical-align:middle;}
.svgiconstop svg{width: 1.5em;
height: 1.5em;
margin: 0px;
padding: 0px;
vertical-align:top;}
</style>
A. icons left to right button vertical-align: none, vertical-align:bottom,
middle, top<br/>
B. svg (set by style section) vertical-align: none, vertical-align:bottom,
middle, top<br/>
A. <div style="border:dotted 2px; display:inline-block;"><$button
style="margin0px; padding:0px;
font-size:1.5em;">{{$:/core/images/full-screen-button}}</$button><$button
style="margin:0px; padding:0px; font-size:1.5em;
vertical-align:bottom;">{{$:/core/images/chevron-left}}</$button><$button
style="margin:0px; padding:0px; font-size:1.5em;
vertical-align:middle;">{{$:/core/images/full-screen-button}}</$button><$button
style="margin:0px; padding:0px; font-size:1.5em;
vertical-align:top;">{{$:/core/images/chevron-right}}</$button>
</div> - - B. <div style="border:dotted 2px; display:inline-block;"><div
style="margin:0px; padding:0px; display:inline-block;"><$button
style="margin:0px; padding:0px;
font-size:1.5em;">{{$:/core/images/full-screen-button}}</$button></div><div
class="svgiconsbottom" style="display:inline-block;"><$button
style="margin:0px; padding:0px;
font-size:1.5em;">{{$:/core/images/chevron-left}}</$button></div><div
class="svgiconsmiddle" style="margin:0px; padding:0px;
display:inline-block;"><$button style="margin:0px; padding:0px;
font-size:1.5em;">{{$:/core/images/full-screen-button}}</$button></div><div
class="svgiconstop" style="margin:0px; padding:0px;
display:inline-block;"><$button style="margin:0px; padding:0px;
font-size:1.5em;">{{$:/core/images/chevron-right}}</$button></div></div>
its a style section and 8 example icons to demo the positioning-- use the
margin attribute in the style section to fine tune the svg's position
you can also put the style section into a global stylesheet
attached is a more detailed demo of svg & button vertical aligns
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/abec6409-8ccf-4b3d-99e3-56569baa1098%40googlegroups.com.
svg icon vertical align_position.tid
Description: Binary data
