How to center the message inside an alert box in JavaScript?

Question

Suppose I have an alert message like:

  alert("Message"); 

When this command is executed, an alert box pops up but the message is aligned to the left of the alert box.

Is there a way to center this message inside the alert box?

Answer 1

If your alert message will be static then add multiple '\\t' at the starting of your message.

alert('\t Quantity should be less than Remaining Quantity! \n \t\t\t Remaining Quantity');

Here \\n is use for break the message and place on next line

Answer 2

Well, one thing you should know is you can't style the alert box. it's the system object not a css thing .

---

if you still want to use alert and want to move your text from left to right use \\t , which is a tab. You can figure out how many characters you're going to use on a line and then encase the text in \\t s.

eg:

\t This text will be centered \t\n
\t in the middle of the alert \t

It's not perfect, but it's as close to what one can move text to center in alertBox.

\\t works perfect with Firefox but not with Chrome. I love Chrome, but as a web developer this is a pain in the neck.

---

FYI: You can also create your own. For example,

jQuery UI Dialog

Have a look here : DEMO

The best thing I used these days to display message is using toast messages. They pops up, show your message in beautiful box and then pops out in sleek manner.

have a look at MATERIALIZE CSS TOASTS

Answer 3

You should be able to edit the CSS file of the Javascript and centralize the content using Text-alight.

#popup_container {
  font-family: Arial, sans-serif;
  font-size: 15px;
  min-width: 300px; /* Dialog will be no smaller than this */
  max-width: 600px; /* Dialog will wrap after this width */
  background: #FFF;
  border: solid 5px #999;
  **text-align:center !important;**
  color: #000;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
}