[TW5] Quick way to centre an image?

1,359 views
Skip to first unread message

shaw.m...@gmail.com

unread,
Apr 19, 2016, 9:44:57 AM4/19/16
to TiddlyWiki
Hey, all.
 
i've been searching through the archives here but I can't find a simple way to centre an image -- I'm creating documentation/SOPs and just want a screenshot to be aligned in the centre rather than the default Left. 
 
Thanks,
-S 
 
 

Mat

unread,
Apr 19, 2016, 9:55:28 AM4/19/16
to TiddlyWiki
<center>asd</center>

Interestingly though, this is not supported in html5 which makes me wonder why it does work or if it is wikitext?

<:-)

shaw.m...@gmail.com

unread,
Apr 19, 2016, 10:38:33 AM4/19/16
to TiddlyWiki
See now, that's weird. It works with text, but not the image. I end up with <center> on one side of the image and </center> on the other...and the damned thing is still left-aligned :)

Eric Shulman

unread,
Apr 19, 2016, 11:04:54 AM4/19/16
to TiddlyWiki
On Tuesday, April 19, 2016 at 6:44:57 AM UTC-7, shaw.m...@gmail.com wrote:
i've been searching through the archives here but I can't find a simple way to centre an image -- I'm creating documentation/SOPs and just want a screenshot to be aligned in the centre rather than the default Left. 

using pure HTML:
   <div style="text-align:center;">[img[...]]</div>

using wikitext inline CSS:
   @@display:block;text-align:center;[img[...]]@@

using a CSS rule in a tiddler tagged with $:/tags/Stylesheet:
   .center { display:block; text-align:center; }
and then write:
   @@.center [img[...]]@@

Note that "display:block" is required for centering to work, otherwise the left/right extents of the containing element fit the content (i.e., match the image dimensions) and there will be no extra whitespace to center the image within.

enjoy,
-e



Mat

unread,
Apr 19, 2016, 11:09:15 AM4/19/16
to TiddlyWiki
On Tuesday, April 19, 2016 at 4:38:33 PM UTC+2, shaw.m...@gmail.com wrote:
See now, that's weird. It works with text, but not the image. I end up with <center> on one side of the image and </center> on the other...and the damned thing is still left-aligned :)


An ol' bookmark of mine. 


<:-)

PMario

unread,
Apr 19, 2016, 5:14:03 PM4/19/16
to tiddl...@googlegroups.com
On Tuesday, April 19, 2016 at 3:44:57 PM UTC+2, shaw.m...@gmail.com wrote:
i've been searching through the archives here but I can't find a simple way to centre an image -- I'm creating documentation/SOPs and just want a screenshot to be aligned in the centre rather than the default Left. 

Download and drag this to your tw and have a look at the included docs. If there are more questions. just ask.
You can test it with tiddlywiki.com.

have fun!
mario
floating-images-plugin.json

Mark S.

unread,
Apr 19, 2016, 7:48:21 PM4/19/16
to TiddlyWiki
That's a neat approach!

If you standardize the style naming, then you can create a single macro for all 3 formats. It gets invoked like:


<<flimage float:"right" "Motovun Jack.jpg" caption:"''float right''" tooltip:"Motovun Jack - The TiddlyWiki Mascot">>


Mark

PMario

unread,
Apr 20, 2016, 2:58:23 AM4/20/16
to tiddl...@googlegroups.com
On Wednesday, April 20, 2016 at 1:48:21 AM UTC+2, Mark S. wrote:
If you standardize the style naming, then you can create a single macro for all 3 formats. It gets invoked like:

<<flimage float:"right" "Motovun Jack.jpg" caption:"''float right''" tooltip:"Motovun Jack - The TiddlyWiki Mascot">>

You are right. but I'd go with a name eg: position instead of float. I think for users this is clearer. position could be left, right or center

But I also think, having different macros gives us a bit more flexibility in the future. So users can have slightly different code for left, right and center. ... Just at the beginning it happens to be the same. So the code looks duplicated. ... But only time can tell, what's easier to handle :)

eg: for the centerd image I personally would like to go with a default width=50% instead of always writing it, with the macro call.

-m

shaw.m...@gmail.com

unread,
Apr 20, 2016, 5:10:02 AM4/20/16
to TiddlyWiki
Sweet!
 
The inline wikitext css is perfect :)
 
Cheers!

shaw.m...@gmail.com

unread,
Apr 20, 2016, 5:10:43 AM4/20/16
to TiddlyWiki
Thanks!  I'll play with that later today.
Reply all
Reply to author
Forward
0 new messages