主页 / 问题 / 680106
Accepted
Misha Rodnoy
Asked:2020-06-16 20:50:28 +0000 UTC2020-06-16 20:50:28 +0000 UTC

块垂直对齐和内容宽度

  • 772

.description-wrap {
  background: #FFD700;
  width: 1200px;
  height: 600px;
  text-align: center;
}

.description-table {
  display: table;
  border: 1px solid green;
  width: 100%;
  height: 100%;
}

.description-cell {
  border: 1px dashed red;
  display: table-cell;
  vertical-align: middle;
}

.description-text {
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  padding: 15px 0;
  font-size: 40px;
  font-weight: normal;
  color: #000;
}

.description-text:first-child {
  margin-bottom: 5%;
}
<body>
  <div class="description-wrap">
    <div class="description-table">
      <div class="description-cell">
        <div class="description-text">БИРЮЧИЙ ОСТРОВ</div>
        <div class="description-text">АЗОВО-СИВАШСКИЙ НАЦИОНАЛЬНЫЙ
          <br>ПРИРОДНЫЙ ПАРК</div>
      </div>
    </div>
  </div>
</body>

问题是你需要根据 div 块中的内容来制作宽度。我想保留顶部和底部边框（比如

) 进行造型。像这样

我会很感激你的帮助。

css

1 个回答

  1. Best Answer

    display: table+margin: 0 auto为description-text：

    .description-wrap {
  background: #FFD700;
  width: 1200px;
  height: 600px;
  text-align: center;
}

.description-table {
  display: table;
  border: 1px solid green;
  width: 100%;
  height: 100%;
}

.description-cell {
  border: 1px dashed red;
  display: table-cell;
  vertical-align: middle;
}

.description-text {
  display: table;
  margin: 0px auto;
  border-top: 3px solid #000;
  border-bottom: 3px solid #000;
  padding: 15px 0;
  font-size: 40px;
  font-weight: normal;
  color: #000;
}

.description-text:first-child {
  margin-bottom: 5%;
}
    <body>
  <div class="description-wrap">
    <div class="description-table">
      <div class="description-cell">
        <div class="description-text">БИРЮЧИЙ ОСТРОВ</div>
        <div class="description-text">АЗОВО-СИВАШСКИЙ НАЦИОНАЛЬНЫЙ
          <br>ПРИРОДНЫЙ ПАРК</div>
      </div>
    </div>
  </div>
</body>

    • 1

相关问题