how to vertically center/align a cell’s contents?
You can center a column’s content with the alignment icons below the column type:
Is vertically centering possible?
My bad I missed the “vertical” part of your question. To my knowledge, the bounding box for fields always scales to the content up to the maximum size of the allocated area and then a scroll bar appears. So the text is always centered vertically in the box but the box is always top justified in the area allocated to it (allocated area indicated by the arrows), as shown in this Card Widget example.
I think the only way to vertically align data would be to use a custom Widget like the HTML or Markdown widget which would let you place data into a web page/rich text document. Then you are relying on the layout features of those types of documents instead of the Grist interface itself.
Here is an example using the Markdown Custom Widget. I must say the HTML is very tricky so this particular HTML works for the Markdown Widget but not the HTML Widget. Likely some HTML will work with the HTML widget but you would have to experiment a bit:
<html>
<head>
<style>
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
</body>
</html>
After playing around with it a bit I found it is very sensitive to blank lines in the HTML. Notice they are all remove in this example. Also note any curly braces in the HTML (i.e. { or } ) must be doubled (i.e. {{ or }} ) for python to leave one behind in the final output to the Widget. Here is an formula that vertically centers a text field in a HTML Widget as a starting point:
Formula in column HTML:
return """<html>
<head>
</head>
<body>
<style>.container {{position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);}}
</style>
<div class="container">
<span>{0}</span>
</div>
</body>
</html>""".format($MyText)
