Problem centering in a Panel

Question

In the following code, I can't figure out how to center the Button and Text components that have been added to a Panel. I can move things vertically by using a Spacer, but I can't figure out how to move them horrizontally. I want to center them in the Panel.
Can anyone tell me what I'm doing wrong?
Thanks!
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"  horizontalAlign="center" verticalAlign="middle" backgroundColor="white"  applicationComplete="init()" borderStyle="none">
    <mx:Script>
        <![CDATA[
            import mx.controls.Spacer;
            import mx.controls.Text;
            import mx.controls.Button;
            import mx.controls.TextArea;
            import mx.containers.Panel;
            import mx.containers.Canvas;
            import mx.containers.*;
            import mx.managers.PopUpManager;
            private var panel:Panel=new Panel();;
            private function init():void {
                var label:Text = new Text();
                var spacer:Spacer=new Spacer
                spacer.height=50
                var button1:Button = new Button();
                button1.label = "OK";
                button1.addEventListener(MouseEvent.CLICK, closePopUp);
                label.text = "Please enter your name:";
                //panel.styleName="panel1"
                panel.width = stage.stageWidth;
                panel.height = 180;
                panel.addChild(spacer);
                panel.addChild(label);
                panel.addChild(button1);
                createPopUp()
            private function closePopUp(evt:MouseEvent):void {
                PopUpManager.removePopUp(panel);
            private function createPopUp():void {
                PopUpManager.addPopUp(panel, this, true);
                PopUpManager.centerPopUp(panel);
        ]]>
    </mx:Script>
</mx:Application>

Answer 1

try this
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
xmlns:mx="http://www.adobe.com/2006/mxml"layout="
absolute" backgroundColor="
white"applicationComplete="init()"
borderStyle="
none">
<mx:Script>
<![CDATA[
import mx.controls.Spacer; 
import mx.controls.Text; 
import mx.controls.Button; 
import mx.controls.TextArea; 
import mx.containers.Panel; 
import mx.containers.Canvas; 
import mx.containers.*; 
import mx.managers.PopUpManager; 
private var panel:Panel=new Panel();; 
private function init():void { 
var label:Text = new Text(); 
var button1:Button = new Button(); 
button1.label =
"OK"; 
button1.x = 200;
button1.y = 200;
button1.addEventListener(MouseEvent.CLICK, closePopUp);
label.text =
"Please enter your name:";label.x = 200;
//panel.styleName="panel1"
panel.width = stage.stageWidth;
panel.height = 180;
panel.addChild(label);
panel.addChild(button1);
createPopUp();
panel.getChildAt(0).x = panel.width/2; //added by tanweer
panel.getChildAt(1).x = panel.width/2; //added by tanweer
private function closePopUp(evt:MouseEvent):void { 
PopUpManager.removePopUp(panel);
private function createPopUp():void { 
PopUpManager.addPopUp(panel,
this, true); 
PopUpManager.centerPopUp(panel);
]]>
</mx:Script>
</mx:Application>
in the place where i added code try to manipulate it according to your req.
I suugest you to use Hbox container for such type of issues. get back to me for furthur questions