I have a `Row { Box() Text() }`, the Box is small and the Text might be multi-line. How do I center ...

# compose

[Marcin Wisniowski]

I have a Row { Box() Text() }, the Box is small and the Text might be multi-line. How do I center the Box with the first line of the text (independent of what the font might be)?

[Marcin Wisniowski]

My current solution is to put the box into another box that uses center alignment and has the height set to the font size of the text, but I feel there is a nicer solution.

[Stylianos Gakis]

Have you looked into alignByFirstBaseline (I think) modifier and in general things around using baselines? Or is this not what you want here?

[Marcin Wisniowski]

I did try using them but they didn't seem to work. They seem to only work when the element you are aligning also has a baseline, like aligning two Texts together by baselines.

[Stylianos Gakis]

In one place in our app where I needed to do something similar to this, I did also use this https://github.com/HedvigInsurance/android/blob/develop/app%2Fcore%2Fcore-ui%2Fsrc%2Fmain%2Fkotlin%2Fcom%2Fhedvig%2Fandroid%2Fcore%2Fui%2Flayout%2FLayoutWithoutPlacement.kt#L15-L25 and in the layout which adjusted the size but isn't placed I added a Text with the same font size and just the text "H" as content. Then this does I think what you want here. The BoxScope is provided so that you can say to the content that does indeed get drawn to be centered on the box for example

[Zach Klippenstein (he/him) [MOD]]

I would write a custom layout for this, then you can read the alignment lines and do whatever alignment you want