如何通过HTML内联样式实现弹窗内元素差异化对齐？

因为没法修改全局的.popup和.popuptext样式，我们可以通过给checkbox和label套块级容器的方式，用内联样式实现局部左对齐同时保持容器居中，按钮则保留原居中效果。

具体代码示例 #

<div class="popup">
  <div class="popuptext">
    <!-- 包裹checkbox和label的容器，实现内部左对齐、容器自身居中 -->
    <div style="width: 100%; max-width: 300px; text-align: left; margin: 0 auto;">
      <label><input type="checkbox"> 删除文件</label>
    </div>
    <!-- 按钮继承父元素的居中样式，保持居中 -->
    <button style="margin-top: 12px;">Delete</button>
  </div>
</div>

为什么之前加span没用？ #

span是行内元素，text-align:left对行内元素不会生效——行内元素的宽度由内容决定，没有足够空间让文本左对齐。换成块级容器（比如div）后，设置width:100%（或限制最大宽度），再用text-align:left就能让内部元素左对齐，同时margin:0 auto保证容器在弹窗里居中，不破坏整体布局。

另一种简化写法（不用额外div） #

直接给label设置内联样式，把它变成块级元素：

<div class="popup">
  <div class="popuptext">
    <label style="display: block; width: 100%; max-width: 300px; text-align: left; margin: 0 auto;">
      <input type="checkbox"> 删除文件
    </label>
    <button style="margin-top: 12px;">Delete</button>
  </div>
</div>

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