Question

我有一个div display:table-cell，因为我希望p在vertical-align:middle里面。

但当我执行此操作时，我想要在div底部的span消失（外出）。

目前的代码可以吗？

＆＃13;

.table1
{
  width:100px;
  height:100px;
  display:table;
  background-color:red;
  text-align:center;
}

.table1 > p
{
  display:table-cell;
  vertical-align: middle;
}

.table > span
{
  width: 100%;
  height: 20px;

  display:block;
  position:absolute;
  bottom:0;

  background-color:blue;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

＆＃13;

<div>
  <div class="table1">
    <p>
      Table 1
    </p>
    <span class="color"></span>
  </div>
</div>

＆＃13;

Answer 1

您的CSS选择器中的

.table必须为.table1，然后您要将position: relative添加到.table1，以便绝对定位的元素将位于 relative 到.table1。然后给出范围left: 0，使其从表格的左侧开始，而不是在p的右侧

.table1
{
  width:100px;
  height:100px;
  display:table;
  background-color:red;
  text-align:center;
  position: relative;
}

.table1 > p
{
  display:table-cell;
  vertical-align: middle;
}

.table1 > span
{
  width: 100%;
  height: 20px;

  display:block;
  position:absolute;
  bottom:0;
  left: 0;
  background-color:blue;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

<div>
  <div class="table1">
    <p>
      Table 1
    </p>
    <span class="color"></span>
  </div>
</div>

展示底部的跨度：表格单元格和垂直对齐

1 个答案: