How to center jQuery header?

Question

I have this jQuery popup that I call as follows:

$("#createprofilepopup").dialog( { title: 'Title text' , height: 490, width: 580 } ); 

But it is displayed to the left. Is there a way to center the name?

Thanks!!

Answer 1

Add CSS Rule:

 .ui-dialog .ui-dialog-title { text-align: center; width: 100%; } 

Answer 2

according to my understanding, if you check jquery-ui.css you will find this line

 .ui-dialog .ui-dialog-titlebar{ padding:...} 

or you can try the following:

 .ui-dialog .ui-dialog-titlebar{ text-align: center; width: 100%;} 

play with this code, and I hope you get the desired result. :)

Answer 3

If you are using the jQuery UI widget set, try changing the class set ".ui-dialog.ui-dialog-title" as follows:

 .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; text-align: center; width: 100%; } 

Answer 4

Checking the code shows that the CSS class .ui-dialog-title is applied to the <span> element, which is inline by default, so in fact the correct CSS code should be:

 .ui-dialog .ui-dialog-title { display: block; text-align: center; width: 100%; } 

Answer 5

See this style and if it has float: left. If yes, delete it

 .ui-dialog .ui-dialog-title 

Then in this style add text-align: center

 .ui-dialog .ui-dialog-titlebar