How do I center an image withing the modal?

[Vayu Asura]

I'm using tm-modal to create a full-res image display. So I call tm-modal to display the image tiddler.

Extracted all the css rules I found regarding the modal:

.tc-modal-wrapper { position: fixed; overflow: auto; overflow-y: scroll; top: 0; right: 0; bottom: 0; left: 0; z-index: 900; }
.tc-modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; background-color: #333333; }
.tc-modal { z-index: 1100; background-color: #ffffff; border: 1px solid #999999; }
@media (max-width: 55em) { .tc-modal { position: fixed; top: 1em; left: 1em; right: 1em; }
.tc-modal-body { overflow-y: auto; max-height: 400px; max-height: 60vh; } }
@media (min-width: 55em) { .tc-modal { position: fixed; top: 2em; left: 5%; width: 90%; }
.tc-modal-body { overflow-y: auto; scroll; max-height: 700px; max-height: 80vh;} }
.tc-modal-header { padding: 9px 15px; border-bottom: 1px solid #eeeeee; }
.tc-modal-header h3 { margin: 0; line-height: 30px; }
.tc-modal-header img, .tc-modal-header svg { width: 1em; height: 1em; }
.tc-modal-body { padding: 15px; }
.tc-modal-footer { padding: 14px 15px 15px; margin-bottom: 0; text-align: right; background-color: #f5f5f5; border-top: 1px solid #dddddd; }

The thing is I can't center smaller images within the modal body, it is always alingned left. Not sure which rule to edit and what to add for the center alignment. 

Not sure if wrapping image into another tiddler would work correctly and it is very undesireable as I want to process img tiddlers directly with a modal-generating macro and thus creating intermediate tiddlers will get clunky.

[Mat]

You can use the browser inspector tool (right click on screen at desirec  spot and select Inspect) . Therein you can add a style for any element. These are good info sources:

https://www.w3.org/Style/Examples/007/center.en.html

https://css-tricks.com/centering-css-complete-guide/

<:-)

[@TiddlyTweeter]

Ciao Vayu,

Mat is making a good point. Centering via CSS in general is counter-intuitive. Its not a specific TW complexity.

Best wishes
Josiah

[Mark S.]

In the late 1990s web productivity was at an all time. The 'irrational exuberance' that resulted lead to the dot-com bubble and collapse. To prevent this from happening again, the W3C and other committees got together and spec'd out a system guaranteed to virtually eradicate productivity. Now a developer might spend an entire afternoon trying to move some element 2 em from the almost perfect place, or perhaps an entire week trying to find out why code that works on virtually every browser won't work in the leading market browser. Boom & bust averted -- mission accomplished!

That said, the following changes *might* do what you want. If it appears to break something else, then the CSS will have to be tweaked to match your particular situation. Basically it turns off the current positioning mechanism and treats the image like text. Be sure to make a back-up before trying.

Good luck!
Mark

.tc-modal-wrapper {
    text-align: center;
    padding-top: 2em;
}
.tc-modal {
    top: unset;
    left: unset;
    width: unset;
    display: inline-block;
    position: unset;
}

[Eric Shulman]

On Wednesday, July 19, 2017 at 2:03:15 PM UTC-7, Vayu Asura wrote:

I'm using tm-modal to create a full-res image display. So I call tm-modal to display the image tiddler.

The thing is I can't center smaller images within the modal body, it is always alingned left. Not sure which rule to edit and what to add for the center alignment. 

The trick is to apply "margin:auto" to the img element... and it only takes ONE line of CSS!!

Simply create a tiddler, tagged with $:/tags/Stylesheet, containing:

.tc-modal-body img { display:block;margin:auto; }

Tested and verified:

1) open http://tiddlywiki.com/#Modals

2) press the "Open demo modal" button... note that MotovunJack image is NOT centered

3) create the stylesheet tiddler as described above

4) press the "Open demo modal" button again.... MotovunJack image is now centered.

Q.E.D

enjoy,

-e

Eric Shulman

TiddlyTools.com: "Small Tools for Big Ideas" (tm)

InsideTiddlyWiki: The Missing Manuals

[Vayu Asura]

That totally worked, thanks!