使用CSS </div> </div>将<div>左对齐到居中的<div>

Question

我尝试创建一个网页，其中包含多个<div>块，并根据下图使用CSS设置样式。但是我不知道如何完成这项工作。我已按照答案（https://stackoverflow.com/a/26599439/478406和https://stackoverflow.com/a/26598329/478406的建议尝试了两种变体，但我认为我遗漏了一些东西。

Answer 1

如果我理解你正确要求的话，下面的HTML和CSS应该可以做你想要的。

请注意display:inline-block允许两个div元素彼此相邻，因此您可以单独设置text-align元素。此外，由于inline-block属性，当屏幕尺寸变小时，元素将会换行。

http://jsfiddle.net/k6y8asbk/

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

.some-text,
.my-list{
    display:inline-block;
    text-align:left;
    vertical-align:top;
}

.my-list{
    text-align:center;
}

ul{
    margin-top:0px;   
}

<div id='message-container'>
    <div class='message-text'>Message Text</div>
    <div class='some-text'>Some text</div>
    <div class='my-list'>
        <ul>
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
        </ul>
    </div>
</div>

Answer 2

我认为要完成这样的事情，您需要将所有内容都包装在text-align: center的容器中，然后将邮件包含在display: inline-block和position: relative的范围内。这将允许第一行文本确定块级元素的宽度，同时仍然在外部容器中居中。由于我们将position设置为relative，因此我们现在可以创建一个子元素，使其与position: absolute对齐到第一行的左边缘。

Here is a jsfiddle as a proof of concept

Noe：绝对位置将元素从堆栈顺序中取出，因此下面的任何内容都会崩溃。这意味着如果第一行太短，第二行将与列表重叠（但无论如何都是一个问题，因为列表应该居中）。如果列表不需要完美居中，则可以将其包含在绝对位置的子元素内，并根据需要调整列表的位置。