如何在W3Schools示例的弹窗中实现多段文本不同对齐？

当然可以实现这种混合对齐的弹窗文本效果！只需要对HTML结构和CSS做一点小调整就能搞定，具体步骤如下：

1. 调整HTML结构 #

给需要不同对齐的文本块分别加上专属的类，这样就能单独控制它们的对齐方式：

<div class="popup" onclick="myFunction()">
  点击切换弹窗
  <span class="popuptext" id="myPopup">
    <span class="center-text">我希望这段标题居中</span>
    <br><br>
    <span class="left-text">这段消息左对齐</span>
    <br><br>
    <span class="center-text">这段最终提示居中</span>
  </span>
</div>

2. 修改并补充CSS样式 #

原示例中.popuptext设置了全局的text-align: center，我们需要覆盖这个样式，同时调整内边距让左对齐的文本不会紧贴弹窗边缘：

/* Popup container - 保留原样式 */
.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 - 调整padding并移除全局text-align */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  border-radius: 6px;
  padding: 8px; /* 替换原padding:8px 0，给左右留出空间 */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* 新增对齐类 */
.center-text {
  display: block; /* 让文本块独占一行 */
  text-align: center;
}

.left-text {
  display: block;
  text-align: left;
}

为什么这样做？ #

• 移除.popuptext的text-align: center，避免全局对齐覆盖我们的自定义样式
• 给不同文本块添加display: block，确保每个文本块单独占一行，对齐效果更清晰
• 调整padding为8px，让左对齐的文本和弹窗边缘有合适的间距，提升视觉体验

别忘了保留原示例中的JavaScript部分（myFunction()）来控制弹窗的显示/隐藏哦！

内容的提问来源于stack exchange，提问作者SteveR