javascript - 如何在弹出窗口中使用不同的文本对齐方式

Question

是否可以在这种类型的弹出窗口中使用不同的文本对齐方式，如 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;
}

Answer 1

每个文本部分应该被分成不同的容器，而这些容器又会得到不同的样式。

.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 类所做的那样。