嵌套div上的HTML和CSS

Question

我在構建一些嵌套div時遇到了問題。

我有以下結構：

<div id="master"> 
    <div id="number"> 
     <p>123</p> 
    </div> 
    <div id="content"> 
     <h1>Title</h1> 
     <p>Some content here.</p> 
    </div> 
</div> 

你可以看看視覺這裏舉例：

• 第一個div，這是 「大師」，有剛保持東西 有組織。
• 被稱爲「內容」的div將填充一些來自數據庫的 信息，因此它不能具有任何固定的高度。 但是，可以指定最小高度。
• 稱爲「數字」 股利必須以遵循「內容」 div的高度和 顯示對準它（文本對齊和 垂直對齊）中心的數量靈活。

我上傳的圖片可以幫助您瞭解我需要的內容。我一直在嘗試很多CSS代碼，但都沒有工作。

編輯1：

這是我必須做它的工作最接近（但數量沒有得到垂直對齊到div的中間）。

#master { 
    display: flex; 
    background-color: #ffffff; 
} 

#number { 
    float: left; 
    width: 100px; 
    vertical-align: middle; /* DOESN'T WORK */ 
    text-align: center; 
} 

#content { 
    float: left; 
    width: 450px; 
} 

Answer 1

您可以嘗試CSS表：

#master { 
    display: table-row; 
} 
#number, #content { 
    display: table-cell; 
} 

然後，

#number { 
    background: red; 
    width: 100px; 
    vertical-align: middle; 
    text-align: center; 
} 
#content { 
    background: blue; 
    width: 450px; 
    min-height: 100px; 
} 

Demo