[TW5] Quick way to centre an image?

[shaw.m...@gmail.com]

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]

<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]

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]

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]

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. 

https://css-tricks.com/float-center/ 

<:-)

[PMario]

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

[Mark S.]

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]

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]

Sweet!

 

The inline wikitext css is perfect :)

 

Cheers!

[shaw.m...@gmail.com]

Thanks!  I'll play with that later today.