时间戳

首页 > 解决方案 > 使标签背景颜色占据 div 的所有高度

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

问题描述

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

这是我的代码。此时，“delete--label”居中并位于正确的位置（这很好），但它的背景不适合所有 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>

标签： htmlcss

解决方案

删除填充.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>

推荐阅读