Question

我希望“删除视频”文本保持居中，而背景色占据div容器的所有高度。

这是我的代码。此时，“删除-标签”居中且处于正确位置（很好），但其背景并不适合所有div高度。

.delete--label {
  background-color: #f53d3d;
  color: #ffffff;
  vertical-align: middle;
  float: right;
  margin: auto;
  width: 100px;
  text-align: center;
  font-size: 0.8em;
}

.user--item-header {
  padding: 10px 20px;
  color: #ffffff;
  background-color: #3f3f3f;
}

.user--item-content {
  padding: 20px;
}

<head>
  <link rel="stylesheet" type="text/css" href="./user.css">
</head>

<body>
  <div class="user--item-header">
    SELECTED VIDEO
    <label class="delete--label">Delete Video</label>
  </div>
</body>

Answer 1

删除填充.user--item-header top和bottom，添加line-height

.user--item-header {
  padding: 0px 20px;
  color: #ffffff;
  background-color: #3f3f3f;
  line-height:45px;
}

.delete--label {
  background-color: #f53d3d;
  color: #ffffff;
  vertical-align: middle;
  float: right;
  margin: auto;
  width: 100px;
  text-align: center;
  font-size: 0.8em;
}

.user--item-header {
  padding: 0px 20px;
  color: #ffffff;
  background-color: #3f3f3f;
  line-height:45px;
}

.user--item-content {
  padding: 20px;
}

<head>
  <link rel="stylesheet" type="text/css" href="./user.css">
</head>

<body>
  <div class="user--item-header">
    SELECTED VIDEO
    <label class="delete--label">Delete Video</label>
  </div>
</body>

使标签背景色占据div的所有高度

1 个答案: