主页 / 问题 / 776507
Accepted
Егор Rmd
Asked:2020-01-27 23:53:03 +0000 UTC2020-01-27 23:53:03 +0000 UTC

如何将子 div [absolute] 的内容对齐到中心？

  • 772

如何将block-item-price 块的内容对齐到中心？不使用像素缩进。（布局应该是流畅的，布局是 1960 像素，布局是 1360，所以没有确切的值）

html {
  font-size: 20pt;
}

body {
  background-image: url(../img/bg.png);
  font-family: "Cormorant Infant", serif;
  margin: 0 auto !important;
  padding: 0 auto !important;
}

.no-gutter > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

.header-video {
  max-height: 960px;
  height: 100%;
  width: 100%;
  position: relative;
}

#video_background {
  position: absolute !important;
  top: -15px !important;
  left: 0px !important;
  bottom: 0px !important;
  right: 0px !important;
  width: 100% !important;
  height: 960px !important;
}

.title-text {
  color: #fff;
  text-transform: uppercase;
  font-family: "Cormorant Infant";
  font-weight: bold;
}

.blank {
  height: 900px;
  position: relative;
  background-image: url(../img/header.png);
  background-repeat: no-repeat;
}

.title-text {
  height: 108px;
  display: inline-block;
  text-align: center;
  width: 100%;
}

.top-menu {
  background-image: url(../img/menu.svg);
  width: 113px;
  height: 40px;
  color: #46382e;
  padding-top: 7px;
  padding-bottom: 14px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 40px;
  margin-left: 60px;
  font-size: 16pt;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
}

.fa-bars {
  font-size: 17px !important;
}

.personal-room {
  background-image: url(../img/lk.svg);
  background-repeat: no-repeat;
  width: 233px;
  height: 40px;
  color: #46382e;
  padding-top: 7px;
  padding-bottom: 14px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 40px;
  margin-right: 60px;
  font-size: 16pt;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  right: 0;
  top: 0;
}

.logo {
  position: absolute;
  left: 50%;
  top: 15px;
  margin-left: -75px;
}

.bootom-blank-icon {
  bottom: 70px;
  position: absolute;
  text-align: center;
  display: inline-block;
  font-size: 34pt;
  z-index: 100;
  width: 100%;
}

.icon-circle {
  color: #fff;
  border: 2px #fff solid;
  display: inline-block;
  border-radius: 100%;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 6px;
  padding-bottom: 9px;
  width: 70px;
  height: 70px;
  margin-left: 15px;
}

.block-item {
  display: block;
  float: left;
  width: 100%;
  background-position: center center;
  position: relative;
  background-size: 100%;
}

.block-item img {
  width: 100%;
}

.block-item-name {
  color: white;
  text-align: right;
  height: 80px;
  font-size: 14pt;
  text-transform: uppercase;
  padding-top: 43px;
  padding-right: 37px;
  font-weight: bold;
  position: absolute;
  margin-left: 6%;
  position: absolute;
  width: 87%;
  border-bottom: 2px #fff solid;
  top: 0;
}

.block-item-name-span {
  font-weight: bold;
  font-family: "Cormorant Infant", serif;
  font-size: 14pt;
}

.block-item-price {
  position: absolute;
  bottom: 30px;
  font-size: 14pt;
}

.price-week {
  background-color: #483e37;
  color: #e3dedb;
  display: inline-block;
  float: left;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 15px;
  padding-right: 15px;
  border-top-left-radius: 35px;
  border-bottom-left-radius: 35px;
}

.price-holy {
  background-color: #e3dedb;
  color: #483e37;
  display: inline-block;
  padding-top: 2%;
  padding-bottom: 2%;
  padding-left: 15px;
  padding-right: 15px;
  border-top-right-radius: 35px;
  border-bottom-right-radius: 35px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<div class="row no-gutter">
  <div class="col-md-4">
    <div class="block-item block-item-standart">
      <img src="https://photos-3.dropbox.com/t/2/AADoJLpMrZqjdFy87e1PqJEJZSZWxuxzfmLFZP5QKr_Quw/12/418398532/png/32x32/1/_/1/2/standart.png/EPKFsq0DGJEQIAIoAg/wawVbTlclODjevfAaQvkdxVsFHkgvpH1f0A0xQPa58U?preserve_transparency=1&size=32x32&size_mode=5" alt="">
      <div class="block-item-name"><span class="block-item-name-span">Стандарт</span></div>
      <div class="block-item-price">
        <span class="price-week">Цена в будни</span>
        <span class="price-holy">Цена в выходные</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="block-item block-item-standart">
      <img src="https://photos-3.dropbox.com/t/2/AADoJLpMrZqjdFy87e1PqJEJZSZWxuxzfmLFZP5QKr_Quw/12/418398532/png/32x32/1/_/1/2/standart.png/EPKFsq0DGJEQIAIoAg/wawVbTlclODjevfAaQvkdxVsFHkgvpH1f0A0xQPa58U?preserve_transparency=1&size=32x32&size_mode=5" alt="">
      <div class="block-item-name"><span class="block-item-name-span">Стандарт</span></div>
      <div class="block-item-price">
        <span class="price-week">Цена в будни</span>
        <span class="price-holy">Цена в выходные</span>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="block-item block-item-standart">
      <img src="https://photos-3.dropbox.com/t/2/AADoJLpMrZqjdFy87e1PqJEJZSZWxuxzfmLFZP5QKr_Quw/12/418398532/png/32x32/1/_/1/2/standart.png/EPKFsq0DGJEQIAIoAg/wawVbTlclODjevfAaQvkdxVsFHkgvpH1f0A0xQPa58U?preserve_transparency=1&size=32x32&size_mode=5" alt="">
      <div class="block-item-name"><span class="block-item-name-span">Стандарт</span></div>
      <div class="block-item-price">
        <span class="price-week">Цена в будни</span>
        <span class="price-holy">Цена в выходные</span>
      </div>
    </div>
  </div>
</div>

告诉我关于定位块的一般性建议、做什么（以及如何做）

ps谁吃一块codeopen舒服： codeopen

html

1 个回答

  1. Best Answer
    .block-item-price {
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0; /* Если не убрать то между inline блоками будет пробел */
}
.price-week, .price-holy {
    float: none;
    font-size: 14pt; /* Восстанавливаем */
}
    • 1

相关问题