是否可以在这种类型的弹出窗口中使用不同的文本对齐方式,如 W3Schools How To ( https://www.w3schools.com/howto/howto_js_popup.asp ) 中所述?
这个 div 部分显示了我想对弹出文本执行的操作:
<div class="popup" onclick="myFunction()">Click me to toggle the popup
<span class="popuptext" id="myPopup">
I'd Like to Center this Heading
<br><br>
Align-left this message.
<br><br>
And center this final prompt
</span>
</div>
这是原始最相关的 CSS:
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
最佳答案
每个文本部分应该被分成不同的容器,而这些容器又会得到不同的样式。
.popup {
background-color: #fafafa;
}
.popup-header,
.popup-footer {
text-align: center;
margin-bottom: 20px;
}
.popup-body {
text-align: left;
}
<div class="popup" onclick="myFunction()">Click me to toggle the popup
<div class="popuptext" id="myPopup">
<div class="popup-header">
<span>I'd Like to Center this Heading</span>
</div>
<div class="popup-body">
<span>Align-left this message.</span>
</div>
<div class="popup-footer">
<span>And center this final prompt</span>
</div>
</div>
</div>
在您的代码中,整个文本内嵌在一个元素中,因此不可能以这种方式更改不同文本的对齐方式。您必须将它们分开,就像我对 popup-header
、popup-body
和 popup-footer
CSS 类所做的那样。
关于javascript - 如何在弹出窗口中使用不同的文本对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48471218/