Is there a way to center content inside `Box` vertically, if the height of the `Box` is smaller than...

# compose

[Arkadii Ivanov]

Is there a way to center content inside Box vertically, if the height of the Box is smaller than the height of the content? Currently it sticks to the top and is clipped at the bottom. But I want the content to be centered and clipped from top and bottom.

[Piotr Prus]

You should use contentAlignment = Center.
Check this preview:

@Preview
@Composable
fun TestBox() {
    Box(
        modifier = Modifier
            .size(40.dp)
            .background(Color.White),
        contentAlignment = Alignment.Center
    ) {
        Box(modifier = Modifier.width(20.dp).height(100.dp).background(Color.Red))
    }
}

[Arkadii Ivanov]

I tried, it does not work.

Box(
            modifier = Modifier
                .size(48.dp)
                .background(Color.LightGray),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "X", fontSize = 64.sp)
        }

[Arkadii Ivanov]

Looks like the text height is being reduced to match the Box. Specifying Text requiredHeight fixes the issue. Thanks!