對齊內容不起作用

我創建了一個子容器，其中包含兩個項目，我想將其顯示爲flex-direction：與justify-content：space-between之間的行。我似乎無法得到它的工作。對齊內容不起作用

HTML：

<body> 
<div class="container"> 
<div class="randqg"> 
<div class="title">Random Quote Generator</div> 
<div class="subcontainer"> 
<i class="fa fa-quote-left fa-3x" aria-hidden="true"></i> 
<a class="twitter-share-button" href="https://twitter.com/intent/tweet">Tweet</a> 
</div> 
<blockquote id="text">Original Text</blockquote> 
<div class="subcontainer"> 
<span id="author">author</span> 
<i class="fa fa-quote-left" aria-hidden="true"></i> 
</div> 
</div> 
</div> 
</body> 
<script src="https://use.fontawesome.com/02b956c77d.js"></script>

CSS：

.container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 
    background-color: blue; 
} 

.randqg { 
    display: flex; 
    align-items: center; 
    min-height: 24em; 
    justify-content: center; 
    flex-direction: column; 
    width: 500px; 
    height: 50%; 
    border: 5px solid red; 
} 

.title { 

} 

.subcontainer{ 
    width: 80%; 
    height: 80%; 
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center; 
    margin: auto; 
}

JS小提琴：https://jsfiddle.net/3qx8aw44/

我與開發工具，證明內容應用到子容器檢查，所以我不要認爲它是一個錯字錯誤。

我認爲這可能是沒有足夠的可用空間來分配項目之間的問題。因此將寬度改爲小於100％。

我檢查

來源

2017-08-06 Sandbagger

你在這裏有很多事情要做。你試圖瞄準哪個分包商？ '.randqg'或'。subcontainer' –

你的'.subcontainer'有一個flex屬性設置，但不是'display：flex;'，所以當你添加了_and flex direction column_因爲你寫了你想要它作爲_row_，工作得很好：https：//jsfiddle.net/3qx8aw44/1/ – LGSon

這是因爲你使用的顯示模塊，則不能使用顯示塊，像證明內容在同一div，您需要使用顯示器撓性給彎曲性能：

.subcontainer{ 
    width: 80%; 
    height: 80%; 
    flex-direction: column; 
    justify-content: space-between; 
    align-items: center; 
    display: flex;      /* added */ 
}

來源

2017-08-06 16:50:56

對齊內容不起作用

回答

相關問題