多行对齐和段落背景答案

【问题标题】：Multi row alignment and paragraph background多行对齐和段落背景
【发布时间】：2015-06-24 18:15:01
【问题描述】：

我在混合呈现文本的两个要求时遇到了麻烦。

我需要能够允许 2 种不同的对齐方式。第一个是经典的对齐方式：一个区域中的左、中和右。二是事后文字的对齐。例如，它可以在区域的左侧对齐，然后在文本中右对齐，或者文本居中对齐，然后文本在文本中右对齐（见上图）。

示例 1：示例 2：

这是我当前的实现：https://jsfiddle.net/2vsxfzLd/4/

<div class="container" id="container">
    <p id="captionRegion" class="captionRegion" style="width: 90%; height: 20%; left: 5%; top: 50%; padding: 0%; -webkit-writing-mode: horizontal-tb; text-align: center; background-color: blue;">
        <span class="outerSpan" style="line-height: 18vh; text-align: end; display: inline-block; width: initial;">
            <span class="innerSpan" style="font-size: 24px; line-height: 30px; color: rgb(255, 255, 255); font-style: normal; font-weight: normal; text-decoration: none; font-family: Arial; padding-left: 12.8px; padding-right: 12.8px; vertical-align: middle; width: 100%; background-color: rgb(100, 100, 100);">
                This is center textAlign <br> 
                text aligned "end" inside the box.
            </span>
        </span>
    </p>
</div>

使用以下 CSS：

.container{
    width:160vh; /* 16:9 */
    height:90vh; /* 16:9 */
    position: absolute;
    display: block;
    overflow: hidden;
    margin: 0;
}

.captionRegion{
    position: absolute;
    z-index: 2147483647;
    margin: 0;
    }

.innerSpan{
    display: inline-block;
    line-height: initial;
}

问题是我希望我的灰色文本背景颜色占据 100% 的宽度。

（innerSpan - 显示：内联块）。

这只能通过将 outerSpan 置于显示模式 inline-block 来工作，这会取消多对齐。

有什么想法吗？

【问题讨论】：

标签： html css alignment width background-color

【解决方案1】：

所以我这样做了：https://jsfiddle.net/2vsxfzLd/9/

感谢弹性盒子。

<div class="container" id="container">
    <div id="captionRegion" class="captionRegion">
        <div class="outerParagraph">
            <div class="innerSpan">
                <span style="background-color: yellow; color: red; padding-left: 12px; line-height: initial;">
                This is center textAlign
                <br/>text aligned "end" inside the box.
                </span>
            </div>
        </div>
    </div>
</div>

【讨论】：