左对齐a <div> 到中心 <div> 用CSS

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: absolute 。

这是一个jsfiddle作为概念证明

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