how to center an image

[Ciofegates]

I am not able to center an image in a tiddler.
According to http://tw-abc.tiddlyspot.com/#[[Center%20image%20%26%20move%20edit%20tags%20field]]
I have set:

{{evid{[img[link]]}}}

in the tiddler where the image has to be centered and

.evid img {
text-align:center;
display:block;
border: 3px dashed red;
}

in the stylesheet tiddler.

The resulting image has the border but is is aligned on the left. Why?

[Ciofegates]

> .evid img {
> text-align:center;
> display:block;
> border: 3px dashed red;
>
> }

Solved: i need to add margin:auto.

[Tobbe]

Hi,

I use Eric's StyleSheetShortcuts tiddler in my StyleSheet like this
[[StyleSheetShortcuts]]

In that tiddler there is a lot of goodies. For your question to center
an image in a tiddler you type:

{{center{[img[nameoftheimage.png]]}}}

StyleShhetShortcut you find here: http://tiddlytools.com

On Nov 16, 11:42 am, Ciofegates <ciofega...@mailinater.com> wrote:
> I am not able to center an image in a tiddler.

> According tohttp://tw-abc.tiddlyspot.com/#[[Center%20image%20%26%20move%20edit%20tags%20field]]

[Måns]

Hi Clofegates

> According tohttp://tw-abc.tiddlyspot.com/#[[Center%20image%20%26%20move%20edit%20tags%20field]]

In the tiddler you are reffering to, it says:
"If you use StyleSheetShortcuts embedded in your StyleSheet tiddler
(and ImageSizePlugin) you can do this:
{{center{[img(25%+,auto)[http://www.puppylinux.com/klhlogo2.png]]}}}"
1) Create a new tiddler called StyleSheetShortcuts
2)Paste the contents (all of it) from http://www.tiddlytools.com/#StyleSheetShortcuts
into the StyleSheetShortcuts tiddler.
3)In your StyleSheet tiddler (find it under Shadowed in the
sidebartabs (most often placed to the right)) embed/refer to the
StyleSheetShortcuts tiddler by encapsulating it in double square
brackets: [[StyleSheetShortcuts ]]
4) Save and reload
Now you can use {{center{[img[image.jpg]]}}.

> I have set:
>
> {{evid{[img[link]]}}}
>
> in the tiddler where the image has to be centered and
>
> .evid img {
> text-align:center;
> display:block;
> border: 3px dashed red;
>
> }
>
> in the stylesheet tiddler.
>
> The resulting image has the border but is is aligned on the left. Why?

This will work if you want to create your own classes instead of using
Eric's stylesheetshortcuts
.center
{ display:block;text-align:center; }
.evid img
{text-align:center;border: 3px dashed red;}

Write this in a tiddler i.e. [[Imagetemplate]]:
{{center{
{{evid{[img[$1]]}}}
}}}

In tiddlers where you want the css applied to images write:
<<tiddler ImageTemplate with:"Image.jpg">>

My example: http://mama.tiddlyspace.com/#ImageTemplate%20testimage%20StyleSheet

Cheers Måns Mårtensson