Vertically centering an icon and text in the same cell of a table

[John Thornton]

I have table data that consists of and Icon followed by some text. The text height is less than the icon height, and the appearance is that the bottom of the icon is resting on the line drawn by the bottom of the text. I have with HTML and embedded CSS style statements been able to accomplish an alignment where the two entities seemed aligned vertically.

<table style="width: 100%;" border="0">
<tbody>
<tr>
<td style="vertical-align: middle;"><img style="vertical-align: middle;" src="https://tiddlywiki.com/favicon.ico" alt="" /><strong>My favorite</strong> (1)</td>
</tr>
</tbody>
</table>

I have not figured out how to achieve this alignment in TiddlyWiki table cells.

This is the example of what I have with no adjustments:

|itemName|k
| Created from the following Recipe(s) |<|<|<|h
| <div class="cell craftingTableName">Blacksmith's Bench</div> |<|<|<|
|!Ingredients    |!Produces    | !Crafting Time | !XP Gained |
|Abysmal Eye (1) | {{Abysmal Daggers Icon External}} Abysmal Daggers (1) | ? |     ??? |
|Branch (5) |~|~|~|
|Iron Bar (10) |~|~|~|
|Thick Leather (5) |~|~|~|
|  |[img[https://tiddlywiki.com/favicon.ico]] text | | |

The CSS I have added to get that output is:

center { display:block; text-align:center; }

.itemName thead td { background-color:brown; color:white; font-size:150%; }

.craftingTableName { background-color:green; color: yellow; font-size:130%; Padding:0; margin: 0, auto; }

.cell { /* compensating the cell padding */ margin:-1px -7px; padding:1px 7px; }

The tables get a bit busy with a single cell having a few of these kind of elements stacked vertically using <p> to cause the line breaks.

Thank you.

[oxydum]

Hi John,

try a CSS:

img {vertical-align: middle;}

Best wishes

[John Thornton]

Thank you, Oxydum. It worked and makes sense in its consistency with the HTML embedded CSS markup. I do not understand it, though. To me, the image seems centered and the text seems not to be centered. It seems counter-intuiitive that changing the centering on the image changes the positioning of the text.

Another thing bothers me with that solution. The alignment change will be on all images. I really would only like to have that change affect images in the table cells, and even the cells of only certain tables. It there an easy CSS selector that would accomplish this? in the HTML version, the CSS is all embedded. That is a painful way of doing things, for sure. In that implementation, I could not figure out how to add CSS on a wiki-wide basis (PBworks). Both in PBworks and TiddlyWiki I know I could add CSS at a page level, which would limit its scope and still present a cleaner, more manageable appearance. I have worked through a CSS tutorial. The kind of mechanism that could work is limiting the scope of the img {} CSS affect with and 'id' selector. I could not figure out how to do that in TiddlyWiki. If I could limit the img {} CSS effect to only tables or table cells, that would also limit its scope to close to 100% of the cases I would desire it.

Thank you all for any additional advice.

[Subi 54]

Use something like this perhaps:

```
<$list filter="[rank[tabimgcss]]">
[data-tiddler-title^="<$view field=title/>"] img {
vertical-align: middle;
}
</$list>
```

Just put `rank` in field of the riddles which contain the tables and use `tabimgcss` as the value.

[S. S.]

Maybe the first example here might help:
https://www.w3schools.com/html/html_id.asp

[John Thornton]

Thank you, Subi 54. It will take me a bit to understand that snippet and how to use it.

[S. S.]

Try the id attribute as shown here : https://www.w3schools.com/html/html_id.asp

[John Thornton]

Thank you, S. S.  The problem I have with that solution I mentioned before. I am doing this in TiddlyWiki, and I have not seen a way to use the 'id' form of CSS selectors, because I have not seen how to tag an element in a TiddlyWiki table with and 'id'. Maybe it is obvious and something I missed, but without that 'id', I can't use CSS that uses that form of selector.

Thank you all for your patience. You all have provided a solution that is usable in my wiki. At this point I am just increasing my knowledge and options.

[John Thornton]

Hello again.

I solved my problem with localizing the CSS to specific areas to a higher degree. I was aware I can provide CSS class names to be associated to the table. By simply using the class names I can localize the CSS to the table. It is somewhat similar to the method of using 'id=' and for all intents, the effect is the same.

Thank you all. I am not soliciting any more input on this matter. Anything you care to add is always welcome.