text-align 会将内部元素向右移动，但如果指定了宽度则不会？

Question

我敢肯定这是一件非常简单的事情，但我整天都在反对它，所以我决定问一下。

我有一些 div，我想在它们的父 div 中向右对齐。如果我不指定宽度，“text-align: right” 会起作用：

<div style="text-align: right;">
    <div>
        This text aligns to the right
    </div>
</div>

但是如果我在内部元素上放置一个以像素为单位的大小，它不会：

<div style="text-align: right;">
    <div style="width: 200px;">
        This div stays on the left
    </div>
</div>

我错过了什么？

Answer 1

实际上，text-align会影响包括文本在内的内联元素。

来自MDN

该text-alignCSS属性描述了如何在线内容，如文字在其父块元素对齐。text-align 不控制块元素本身的对齐方式，只控制它们的内联内容。

在第一种情况下，内部从外部div继承text-align属性div并将其应用于其内联元素，

即内部div没有对齐到右侧或左侧。但是当它填满其父级的整个水平空间时，您会看到文本在外部 div 的右侧对齐。

在第二种情况下，内部div有一个显式width，它不再填充其父级的整个水平空间，并且text-align应用于文本而不是 div 本身。

如果要将内部 div 移动到一侧。你有两个选择：

1. 使用float: right用于内和在外侧的端部清除浮动div。工作演示

2. 使用display: inline-block的内部和text-align: right用于外部div。
   工作演示。