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

时间：2018-06-19 18:19:21

标签： html css

你好，我只是困惑任何人都可以帮助我 我试图消除文本之间的这些间隙，但没有完成 请检查代码并提供工作代码 与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>

ERROR Screenshot

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

Origin Error Link jsfiddle.net editor

1 个答案:

答案 0 :(得分：0)

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

display: flex;
justify-content: center;
align-items: center;
相关问题
最新问题