Center Elements in HStack

Question

I am trying to implement a text field that is centered, but I cannot seem to do so. I tried doing it in 3 different ways, but it is still leading aligned.

//Mobile Number Field
                    
                    HStack(alignment: .center) {
                        
                        //Enter your number field
                        VStack(alignment: .center, spacing: 6){
                            Text("+ \(loginData.getCountryCode()) \(loginData.phoneNumber)")
                                .foregroundColor(Color.white)
                                .font(Font.custom("URWDIN-Thin", size: 20))
                                .padding(.top, 40)
                                .frame(alignment: .center)
                        }
                        
                        Spacer(minLength: 0)
                        
                    }

So I tried aligning it to center via the HStack and VStack constructors, and also the frame of the text. My result is still this:

With the user inputted text being leading aligned as well. Any insight as to how to fix this?

Answer 1

If you're trying to implement a text field you should use TextField… but I suppose than you want to align a Text instead so, implement this: .multilineTextAlignment(.center) on your code.

If you want to explicitly center your Text change your padding parameter with this: .padding(.horizontal, 40).

//Mobile Number Field
                    
                    HStack(alignment: .center) {
                        
                        //Enter your number field
                        VStack(alignment: .center, spacing: 6){
                            Text("+ \(loginData.getCountryCode()) \(loginData.phoneNumber)")
                                .foregroundColor(Color.white)
                                .font(Font.custom("URWDIN-Thin", size: 20))
                                .padding(.horizontal, 40)
                                .multilineTextAilgnment(.center)
                        }
                        
                        Spacer(minLength: 0)
                        
                    }