I know this has been discussed since `alpha04` cam...

# compose

[Sam]

I know this has been discussed since alpha04 came out, but I searched every answer here along with compose-samples. How do we horizontally center all children in a Column ? This doesn’t compile:

Column(Modifier.align(Alignment.Horizontal)) { ... }

And this compiles but doesn’t do the job:

Column(Modifier.align(Alignment.CenterHorizontally)) { ... }

I’ve resorted to putting Modifier.align(Alignment.CenterHorizontally) on all the children within the Column, but I’m betting that’s not the intended solution.

[Afzal Najam]

Are you sure that the parent of this Column is taking up all the space?

This works for me, unless I'm missing something

Column(Modifier.fillMaxSize().then(Modifier.padding(8.dp))) {
        Column(Modifier.align(Alignment.CenterHorizontally)) {
            Text(text = "hello")

            Column {
                Text(text = "World")
            }
        }
    }

[Sam]

Yep I’m sure, because I have Text("or") that is all the way to the left, and if I give that text Alignment.CenterHorizontally it will go to the center. What are the rules of Center vs CenterHorizontally? I used to think Center was used on the container to govern the children, but now I don’t know what to think..

[Afzal Najam]

Hmm, I think you might be looking for the horizontalAlignment argument actually, instead of the align Modifier. That's the one that deals with children. verticalArrangement for the vertical children stuff too.

Try this:

Column(
    modifier = Modifier.fillMaxSize().then(Modifier.padding(8.dp)), 
    horizontalAlignment = Alignment.CenterHorizontally) {
    Text(text = Screen.Profile.title)

    Column {
        Text(text = Screen.Profile.title)
    }
}

[Sam]

That worked! Thanks @Afzal Najam