Flex accordion component header text center display

The title Text of the Flex accordion component is left by default. You can center the header text by setting the headerstylename attribute, and set the font style.

1 <? XML version = "1.0" encoding = "UTF-8"?> 2 <s: Application xmlns: FX = "http://ns.adobe.com/mxml/2009" 3 xmlns: S = "Library: // ns.adobe.com/flex/spark" 4 xmlns: MX = "Library: // ns.adobe.com/flex/mx "5 width =" 100% "Height =" 100% "> 6 7 <FX: SCRIPT> 8 <! [CDATA [9 Import MX. collections. arraycollection; 10 11 [Bindable] 12 private var sex: arraycollection = new arraycollection (13 [{name: "male", value: 1}, {name: "female", value: 2}]); 14]> 15 </FX: SCRIPT> 16 17 <FX: style> 18. accordionheader {textalign: center; fontweight: bold; fontsize: 12} 19 </FX: style> 20 21 <mx: accordion width = "200" Height = "80%" Left = "20" Top = "20" 22 headerstylename = "accordionheader"> 23 <s: navigatorcontent width = "100%" Height = "100%" label = "Personal Information"> 24 <s: vgroup width = "100%" Height = "100%" Top = "10" Gap = "10"> 25 <s: hgroup width = "100%" horizontalalign = "center"> 26 <s: Label text = "name:" verticalalign = "Middle" Height = "25"/> 27 <s: textinput width = "100" Height = "25"/> 28 </S: hgroup> 29 <s: hgroup width = "100%" horizontalalign = "center"> 30 <s: label text = "Gender:" verticalalign = "Middle" Height = "25"/> 31 <s: dropdownlist width = "100" Height = "25" dataprovider = "{sex}" 32 labelfield = "name" prompt = "confidential"/> 33 </s: hgroup> 34 <s: hgroup width = "100%" horizontalalign = "center"> 35 <s: Label text = "age: "verticalalign =" Middle "Height =" 25 "/> 36 <s: textinput width = "100" Height = "25" restrict = "0-9" maxchars = "2"/> 37 </S: hgroup> 38 <s: hgroup width = "100%" horizontalalign = "center"> 39 <s: Label text = "Occupation:" verticalalign = "Middle" Height = "25"/> 40 <s: textinput width = "100" Height = "25"/> 41 </S: hgroup> 42 <s: hgroup width = "100%" horizontalalign = "center"> 43 <s: label text = "Address:" verticalalign = "Middle" Height = "25"/> 44 <s: textinput width = "100" Height = "25"/> 45 </S: hgroup> 46 </S: vgroup> 47 </S: navigatorcontent> 48 <s: navigatorcontent width = "100%" Height = "100%" label = ""> 49 <s: vgroup width = "100%" Height = "100%" Top = "10" Gap = "10" 50 horizontalalign = "center"> 51 <s: label text = "personal feedback" verticalalign = "Middle" fontweight = "bold" color = "blue"/> 52 <s: textarea Height = "80%" bordercolor = "black"/> 53 </S: vgroup> 54 </S: navigatorcontent> 55 <s: navigatorcontent width = "100%" Height = "100%" label = "submit information"> 56 <s: vgroup width = "100%" Height = "100%" Top = "10" Gap = "10" 57 horizontalalign = "center"> 58 <s: hgroup width = "100%" horizontalalign = "center"> 59 <s: Label text = "Mode:" verticalalign = "Middle" Height = "20"/> 60 <s: radiobutton label = "anonymous" groupname = "radiogroup1" selected = "true"/> 61 <s: radiobutton label = "Real Name" groupname = "radiogroup1"/> 62 </s: hgroup> 63 <s: button width = "70%" label = "Submit" fontsize = "14"/> 64 </S: vgroup> 65 </s: navigatorcontent> 66 </MX: accordion> 67 </S: Application>