删除容器右侧的多余空间

时间:2019-06-25 21:52:26

标签: html css

我有一个父容器,在它的右边有多余的空间,这导致内部内容稍微偏离中心。我要删除此多余的空间,并让父级宽度与孩子的宽度完全相同。

在这里您可以看到内容右侧的多余空间:

enter image description here

我尝试将父容器设置为“ display:inline-block;”

.u-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

blockquote {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 5em auto;
  padding: 50px 0 50px;
  position: relative;
}

blockquote p {
  font-size: 2em;
  margin: 0;
  position: relative;
}

blockquote:before {
  top: 12px;
  left: 20%;
  transform: rotate(3deg);
}

blockquote:after {
  top: auto;
  bottom: 12px;
  left: 38%;
  transform: rotate(-5deg);
}

blockquote p:before {
  content: "\201C";
  display: block;
  font-size: 5em;
  color: #ffd4c5;
  position: absolute;
  top: -50px;
  left: -5px;
  line-height: 100%;
}

blockquote:before,
blockquote:after {
  display: block;
  content: "";
  width: 46%;
  height: 3px;
  background-color: #ffd4c5;
  position: absolute;
}
<div class="u-center">
  <blockquote>
    <p>Something Good was fantastic, a great couple of days in my new favourite city, both inspiring and energising – Anthony Burrill</p>
  </blockquote>

</div>

我要删除文本右边的多余空间,如上图所示。

0 个答案:

没有答案