时间戳

首页 > 解决方案 > 消除 3 个不同 div 类之间的差距

html - 消除 3 个不同 div 类之间的差距

问题描述

你好我只是困惑任何人帮助我我试图消除文本之间的这些差距但没有完成请检查代码并使用 CSS 提供工作代码。请帮我消除间隙并将其放在中间。

#DIV_1 {
  background-position: 50% 50%;
  bottom: 200px;
  box-sizing: border-box;
  cursor: pointer;
  height: 212.938px;
  left: 0px;
  position: relative;
  right: 0px;
  text-align: center;
  top: -30px;
  width: 270.391px;
  perspective-origin: 86.6875px 106.469px;
  transform-origin: 86.6875px 106.469px;
  background: rgba(0, 0, 0, 0) url("https://psdstar.com/wp-content/uploads/2018/06/hd-3d-free-Lotus-Flower-275x155.jpg") no-repeat scroll 50% 50% / auto padding-box border-box;
  border-radius: 6px 6px 6px 6px;
  font: normal normal 400 normal 16px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  overflow: hidden;
}


/*#DIV_1*/

#DIV_1:after {
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  font: normal normal 400 normal 16px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
}


/*#DIV_1:after*/

#DIV_1:before {
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  font: normal normal 400 normal 16px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
}


/*#DIV_1:before*/

#H3_2 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  height: 130px;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  width: 260.391px;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 86.6875px 65px;
  transform-origin: 86.6875px 65px;
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 32px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  margin: 0px;
  outline: rgb(255, 255, 255) none 0px;
  padding: 68px 0px 25px;
}


/*#H3_2*/

#H3_2:after {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 32px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#H3_2:after*/

#H3_2:before {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 32px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#H3_2:before*/

#H4_3 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  height: 20px;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  width: 260.391px;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 86.6875px 10px;
  transform-origin: 86.6875px 10px;
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 17px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  margin: px 0px 18px;
  outline: rgb(255, 255, 255) none 0px;
}


/*#H4_3*/

#H4_3:after {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 17px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#H4_3:after*/

#H4_3:before {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 17px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#H4_3:before*/

#A_4 {
  bottom: 0px;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: block;
  height: 30px;
  left: 0px;
  position: relative;
  right: 0px;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  top: 0px;
  width: 104.031px;
  z-index: 10;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 52.0156px 15px;
  transform-origin: 52.0156px 15px;
  caret-color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, 0) linear-gradient(to left, rgb(134, 201, 168), rgb(161, 201, 103)) repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(255, 255, 255);
  border-radius: 30px 30px 30px 30px;
  font: normal normal 400 normal 20px / 30px Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  margin: 0px 75.6875px 0px 75.6719px;
  outline: rgb(255, 255, 255) none 0px;
  transition: all 0.2s ease-in-out 0s;
}


/*#A_4*/

#A_4:after {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 20px / 30px Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#A_4:after*/

#A_4:before {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 20px / 30px Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#A_4:before*/

#DIV_1 {
  background-position: 50% 50%;
  bottom: 200px;
  box-sizing: border-box;
  cursor: pointer;
  height: 212.938px;
  left: 0px;
  position: relative;
  right: 0px;
  text-align: center;
  top: -30px;
  width: 270.391px;
  perspective-origin: 86.6875px 106.469px;
  transform-origin: 86.6875px 106.469px;
  background: rgba(0, 0, 0, 0) url("https://psdstar.com/wp-content/uploads/2018/06/hd-3d-free-Lotus-Flower-275x155.jpg") no-repeat scroll 50% 50% / auto padding-box border-box;
  border-radius: 6px 6px 6px 6px;
  font: normal normal 400 normal 16px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  overflow: hidden;
}


/*#DIV_1*/

#DIV_1:after {
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  font: normal normal 400 normal 16px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
}


/*#DIV_1:after*/

#DIV_1:before {
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  font: normal normal 400 normal 16px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
}


/*#DIV_1:before*/

#H3_2 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  height: 130px;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  width: 260.391px;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 86.6875px 65px;
  transform-origin: 86.6875px 65px;
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 32px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  margin: 0px;
  outline: rgb(255, 255, 255) none 0px;
  padding: 68px 0px 25px;
}


/*#H3_2*/

#H3_2:after {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 32px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#H3_2:after*/

#H3_2:before {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 32px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#H3_2:before*/

#H4_3 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  height: 20px;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  width: 260.391px;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 86.6875px 10px;
  transform-origin: 86.6875px 10px;
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 17px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  margin: px 0px 18px;
  outline: rgb(255, 255, 255) none 0px;
}


/*#H4_3*/

#H4_3:after {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 17px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#H4_3:after*/

#H4_3:before {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  cursor: pointer;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 17px / normal Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#H4_3:before*/

#A_4 {
  bottom: 0px;
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  display: block;
  height: 30px;
  left: 0px;
  position: relative;
  right: 0px;
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  top: 0px;
  width: 104.031px;
  z-index: 10;
  column-rule-color: rgb(255, 255, 255);
  perspective-origin: 52.0156px 15px;
  transform-origin: 52.0156px 15px;
  caret-color: rgb(255, 255, 255);
  background: rgba(0, 0, 0, 0) linear-gradient(to left, rgb(134, 201, 168), rgb(161, 201, 103)) repeat scroll 0% 0% / auto padding-box border-box;
  border: 0px none rgb(255, 255, 255);
  border-radius: 30px 30px 30px 30px;
  font: normal normal 400 normal 20px / 30px Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  margin: 0px 75.6875px 0px 75.6719px;
  outline: rgb(255, 255, 255) none 0px;
  transition: all 0.2s ease-in-out 0s;
}


/*#A_4*/

#A_4:after {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 20px / 30px Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#A_4:after*/

#A_4:before {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  text-align: center;
  text-decoration: none solid rgb(255, 255, 255);
  column-rule-color: rgb(255, 255, 255);
  caret-color: rgb(255, 255, 255);
  border: 0px none rgb(255, 255, 255);
  font: normal normal 400 normal 20px / 30px Arial, Abel-Regular, Helvetica;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
}


/*#A_4:before*/
<div id="DIV_1">
  <h3 id="H3_2">
    2000
  </h3>
  <h4 id="H4_3">
    Free Templates
  </h4> <a href="https://psdstar.com/new-wallpapers/" rel="nofollow" id="A_4">More</a>

错误截图

我无法在此处添加长 CSS 代码，因此请检查此 urlv

来源错误链接 jsfiddle.net 编辑器

标签： htmlcss

解决方案

如果要将文本居中到 div 的中间，请删除您在其上设置的所有填充/边距。然后将 flexbox 添加到您的父 div：

display: flex;
justify-content: center;
align-items: center;

推荐阅读