嵌套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是“ master”，在那里只是為了使事情井井有條。
• 稱為“內容”的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;
}

演示