Re: Center a table in a tiddler

[Mat]

Yes, I'm pretty sure you can use the center command in html - which I suspect requires tiddlytools htmlformattingplugin.
<:-)

On Tuesday, March 12, 2013 8:20:48 AM UTC+1, Aaron Schutte wrote:

Is it possible to center a table inside a tiddler.  I tried using center{{ {|!stuff|!more stuff|}}} with the StyleSheetOptions, but it crashes firefox.  Any other ideas?

[Arc Acorn]

I can't recall what version of firefox started supporting boxes so I'm not sure if this is working in stable builds yet... but I like this method:

@@-moz-box-pack:center;display:-moz-box;width: 100%;

|h1|h2|h3|

|1-1|1-2|1-3|

|2-1|2-2|2-3|

@@

[Tobias Beer]

Hi Aaron,

I highly recommend using Firebug or the Chrome inspection tools. Then you see the classes being applied to a table. Unlike what Arc suggests, I highly recommend not to use browser specific styles! Internet Explorer has been rightfully hated for doing this and I don't see much reason why webkit or mozilla based browsers should get away with it... non standard's compliant css is a pest.

Having said that, here's what you do...

If you want a table centered, you either use...

|centered|k

|cell|cell|

...with the following styles in your StyleSheet...

.viewer table.centered{
    margin:0 auto;
}

...see http://tiddlywiki.org/#Tables

...or...

{{centered{

|cell|cell|

}}}

...with these styles...

.viewer .centered table{
    margin:0 auto;
}

...see http://tiddlywiki.org/#%5B%5BCSS%20Formatting%5D%5D

Cheers, Tobias.

[Tobias Beer]

To understand how this works using margin:auto, see here...

http://www.w3schools.com/css/css_align.asp

Cheers, Tobias.

[Tobias Beer]

I have also created a FAQ entry at tiddlywiki.org...

http://tiddlywiki.org/#%5B%5BHow%20can%20I%20center%20an%20element%3F%5D%5D

Cheers, Tobias.

[Aaron Schutte]

Awesome!  Thank you!