使孩子的父母全高并垂直居中

Question

我想连续显示一个数字和2个文本区域。

数字应位于“框”中，背景的高度和行本身的数字应在“框”中垂直和水平居中。

我知道我可以做类似position: absolute; top: 0, left: 0事情position: absolute; top: 0, left: 0 .number 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> 

编辑1：您可以在摘要中看到该框不是容器的整个高度。 那不是我想要的。

编辑2：我想您可以通过使用渐变作弊，但然后我必须确保文本区域与数字框末端匹配，以使渐变看起来像数字“框”的颜色。

Answer 1

您可以使用flexbox来实现这一点，所有现代浏览器都支持它，并且带有前缀也可以在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 2

使用 flex display: table-cell

更新1：展示如何使用单元格填充创建“边距”

更新2：显示逐步增强功能以​​在可用时使用flex

 *{ 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 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"> <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>