[TW5] Quick way to centre an image?

已查看 1,369 次
跳至第一个未读帖子

shaw.m...@gmail.com

未读,
2016年4月19日 09:44:572016/4/19
收件人 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

未读,
2016年4月19日 09:55:282016/4/19
收件人 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

未读,
2016年4月19日 10:38:332016/4/19
收件人 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

未读,
2016年4月19日 11:04:542016/4/19
收件人 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

未读,
2016年4月19日 11:09:152016/4/19
收件人 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

未读,
2016年4月19日 17:14:032016/4/19
收件人 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.

未读,
2016年4月19日 19:48:212016/4/19
收件人 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

未读,
2016年4月20日 02:58:232016/4/20
收件人 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

未读,
2016年4月20日 05:10:022016/4/20
收件人 TiddlyWiki
Sweet!
 
The inline wikitext css is perfect :)
 
Cheers!

shaw.m...@gmail.com

未读,
2016年4月20日 05:10:432016/4/20
收件人 TiddlyWiki
Thanks!  I'll play with that later today.
回复全部
回复作者
转发
0 个新帖子