Question

我有以下内容：

#innerLabels,
#innerFields {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 1px;
  vertical-align: top;
}
.innerLabel {
  display: table;
  border-style: solid;
  border-width: 1px;
  height: 100px;
  width: 80%;
}
.innerLabel div {
  display: table-cell;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
}
#outterFields {
  background-color: red;
  width: 60%;
  min-width: 300px;
  height: 300px;
}
#outterFields div {
  display: inline-block;
}

<div id="outterFields">
  <div id="innerLabels">
    <div class="innerLabel">
      <div>hello</div>
    </div>
  </div>
</div>

我无法理解为什么最内层的div没有居中？我确实在这里看了一些关于居中的答案但是我看不出问题是什么......

我希望hello垂直居中于中心但不是水平居中。 所有其他div都定位于我想要的方式。其他div中没有错误它们并排放置是有原因的。我想要的唯一改变是hello div垂直移动到中心

Answer 1

你只是用

覆盖你的内心div

#outterFields div {
    display: inline-block;
}

只需将其删除，或者如果您打算直接生孩子，请执行以下操作：

#outterFields > div {
    display: inline-block;
}

＆＃13;

#innerLabels,
#innerFields {
  display: inline-block;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-width: 1px;
  vertical-align: top;
}
.innerLabel {
  display: table;
  border-style: solid;
  border-width: 1px;
  height: 100px;
  width: 80%;
}
.innerLabel div {
  display: table-cell;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
}
#outterFields {
  background-color: red;
  width: 60%;
  min-width: 300px;
  height: 300px;
}
#outterFields div {
 /* display: inline-block; */
}

＆＃13;

<div id="outterFields">
  <div id="innerLabels">
    <div class="innerLabel">
      <div>hello</div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

使用display: table-cell将div居中的必要且最常用的条件如下：

<div id="a">
    <div id="b">
        <div id="c">Helo</div>
    </div>
</div>

CSS如下：

body, html {
  height: 100%;
}

#a {
  display: table;
  width: 100%;
  height: 100%;
}

#b {
  display: table-cell;
  vertical-align: middle;
}

#c {
  margin: auto;
  text-align: center;
}

如果您希望html div能够使用其body，则需要a和100%元素才能实际跨越文档区域的整个高度高度。如果您的用例要求高度不依赖于文档正文的高度，则不必使用body, html选择器。
当您使用display: table时，div元素（width: auto隐式规则）的其他自动展开宽度不再像使用display: table的元素那样应用相同的方式保守的宽度计算 - 它们默认只占用内容所需的空间。因为我正在说明＆＃34; 100％100％＆＃34;以你为中心，width: 100%让元素扩展为可用的父宽度。
height: 100%将元素展开为可用的父高度。如果您希望计算出的高度超出内容高度，则display: block与常规div元素或display: table一样无关紧要 - 您需要指定高度。
display: table-cell规则仅在存在具有display: table的祖先元素时才有效，因此您需要至少两个元素才能将display: table-cell应用于包含在height中的元素。其他。您不需要指定display: table-cell，因为vertical-align的元素会自动占用可用的父级。

display: table-cell

vertical-align

内容

display: table-cell

c

仅当您的内容未完全填充可用的父级宽度时，margin: auto元素才需要div。由于span元素通常会这样做，所以不是必要的，但我正在思考 - 如果您决定使用text-align或其他保守计算其宽度的东西。 IF @Type = 'TestingA' Then select e.employeeId from Employee e where e.employeeID NOT IN (select ta.employeeID from TestingA ta) else select e.employeeId from Employee e where e.employeeID NOT IN (select ta.employeeID from TestingB ta)说明了一切 - 匿名文本内容和后代元素中的文本将沿着水平轴居中在中间。

Answer 3

您的outterfields显示内联块会覆盖其他显示项目。我想出了更好的解决方案。我没有使用过table但是在这里使用flex了解flex更值得。

#outterFields {
   background-color:red;
   width:60%;
   min-width:300px;
   height:300px;
}
#innerLabels, #innerFields {
   display:flex;
   align-items:center;
   width:200px;
   height:200px;
   border: 1px solid #000;
}
.innerLabel {
   display:flex;
   align-items:center;
   border: 1px solid #000;
   height:100px;
   width:80%;
}
.innerLabel div {
   display:table-cell; 
   vertical-align: middle;
   border: 1px solid #000;
}

<div id="outterFields">
     <div id="innerLabels">
        <div class="innerLabel"><div>hello</div></div>
     </div>
</div>

div中的div使用display：table

3 个答案: