Question

我想在一行中显示一个数字和两个文本区域。

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

我知道我可以在position: absolute; top: 0, left: 0上执行类似.number的操作，但这会将其从文档流程中删除。并且文本，实际数字不会居中。

* {
  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来实现这一目标，所有现代浏览器都支持它，而使用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 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>

让孩子的父母全长和垂直居中的文字

3 个答案: