如何在 JavaScript 中将消息居中显示在警告框中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18111383/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center the message inside an alert box in JavaScript?
提问by Benjamin Felix
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?
有没有办法将此消息放在警报框中？
回答by xxbinxx
Well, one thing you should know is you can't style the alert box. it's the system object not a css thing.
嗯，你应该知道的一件事是你不能设置警告框的样式。它是系统对象而不是 css 的东西。
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 \ts.
如果您仍然想使用警报并希望将文本从左移到右使用\t，这是一个选项卡。您可以计算出将在一行中使用多少个字符，然后将文本括在\ts 中。
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.
它并不完美，但它与人们可以将文本移动到 alertBox 中的中心位置非常接近。
\tworks perfect with Firefox but not with Chrome. I love Chrome, but as a web developer this is a pain in the neck.
\t适用于 Firefox，但不适用于 Chrome。我喜欢 Chrome，但作为 Web 开发人员，这让我很头疼。
FYI: You can also create your own. For example,
仅供参考：您也可以创建自己的。例如，
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.
这些天我用来显示消息的最好的方法是使用 toast 消息。它们弹出，在漂亮的盒子中显示您的消息，然后以时尚的方式弹出。
have a look at MATERIALIZE CSS TOASTS
回答by Kunal Waghmare
If your alert message will be static then add multiple '\t' at the starting of your message.
如果您的警报消息是静态的，则在消息的开头添加多个 '\t'。
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
这里 \n 用于中断消息并放在下一行
回答by JonnyChin
You should be able to edit the CSS file of the Javascript and centralize the content using Text-alight.
您应该能够编辑 Javascript 的 CSS 文件并使用 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;
}
