我有一个父容器,在它的右边有多余的空间,这导致内部内容稍微偏离中心。我要删除此多余的空间,并让父级宽度与孩子的宽度完全相同。
在这里您可以看到内容右侧的多余空间:
我尝试将父容器设置为“ 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>
我要删除文本右边的多余空间,如上图所示。