子が親の全高と垂直方向の中央のテキストにする

Question

数字と2つのテキスト領域を連続して表示したい。

数字は「ボックス」内にある必要があります。バックグラウンドは行の高さで、その数字は「ボックス」内で縦と横の中央に表示されます。

私はでposition: absolute; top: 0, left: 0のようなことをすることができると知っていますが、これはドキュメントの流れからそれを引き出します。テキストは、実際の番号が中央に配置されません。

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 40%; 
 
} 
 
.number { 
 
    background: skyblue; 
 
    /*position: absolute;*/ 
 
    top: 0; 
 
    bottom: 0; 
 
    vertical-align: middle; 
 
} 
 
.row > div { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.row { 
 
    background: lightgreen; 
 
    position: relative; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div>

EDIT 1：あなたはボックスは、コンテナの完全な高さではないことをスニペットで見ることができます。それは私が望むものではありません。

EDIT 2：グラデーションを使ってカンニングすることができますが、テキスト領域が数字ボックスの終点と一致するようにしなければなりません。 。

Answer 1

使用 flex display: table-cell

アップデート1：セルのパディングを使用せずに "余裕" を作成する方法を示し

アップデート2：プログレッシブ・エンハンスメントを表示使用する場合flex ava ilable

*{ 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 40%; 
 
} 
 
.number{ 
 
    background: skyblue; 
 
} 
 
.row > div { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 
.row { 
 
    background: lightgreen; 
 
    position: relative; 
 
} 
 

 
/* 3 ways to create a left margin on textArea */ 
 
.row .textArea.nr1 { border-left: 10px solid transparent; } 
 
.row .textArea.nr2 { position: relative; left: 10px; } 
 
.row .textArea.nr3 { padding-left: 10px; } 
 

 
/* feature detect - use flex when available */ 
 
@supports (display: flex) { 
 
    .row > div { 
 
    display: block; 
 
    } 
 
    .row { 
 
    display: flex; 
 
    } 
 
    .row .number { 
 
    display: flex; 
 
    align-items: center; 
 
    } 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea nr1"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea nr2"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea nr3"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

これを実現するにはflexboxを使用することができます。最新のブラウザーであればそれをサポートし、prefixesではIE10でも動作します。

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 40%; 
 
} 
 
.row { 
 
    background: lightgreen; 
 
    display: flex; 
 
} 
 
.number { 
 
    background: skyblue; 
 
    display: flex; 
 
    align-items: center; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div>

それとも、それはあまりにもレガシーブラウザ上で動作するようになっCSSのテーブルを使用しています。

* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 40%; 
 
} 
 
.row { 
 
    background: lightgreen; 
 
    display: table; 
 
    width: 100%; 
 
} 
 
.number, 
 
.textArea { 
 
    display: table-cell; 
 
} 
 
.number { 
 
    background: skyblue; 
 
    white-space: nowrap; 
 
    vertical-align: middle; 
 
} 
 
.textArea { 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="number">10</div> 
 
    <div class="textArea"> 
 
     <div class="companyName">Top title</div> 
 
     <div class="industry">secondary text</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

*{ 
 
    box-sizing: border-box; 
 
} 
 
.container{ 
 
    width: 40%; 
 
} 
 
.number{ 
 
    background: skyblue; 
 
    /*position: absolute;*/ 
 
    top: 0; 
 
    bottom: 0; 
 
    vertical-align: middle; 
 
    height: 40px; 
 
    padding-top: 11px; 
 
} 
 
.row > div{ 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 
.row{ 
 
    background: lightgreen; 
 
    position: relative; 
 
}

<div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="number">10</div> 
 
\t \t \t <div class="textArea"> 
 
          <div class="companyName">Top title</div> 
 
\t \t \t \t <div class="industry">secondary text</div> 
 
\t \t \t </div> 
 
\t \t </div> 
 

 
\t </div>