左對齊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：絕對位置使元素脫離了堆棧順序，因此下面的所有內容都會折疊起來。 這意味着如果第一行太短，第二行將與列表重疊（但是無論如何，這都是一個問題，因為列表應該居中）。 如果列表不需要完美居中，則可以將其包含在絕對位置的子元素內，並根據需要調整列表的位置。