在字体上添加填充和边距有什么意义
.center-title {
position: absolute;
/* top: 60%; */
width: 100%;
display: flex;
flex-direction: row;
align-items: flex-end;
align-content: flex-end;
height: 300px;
}
.main {
position: relative;
display: inline-block;
height: initial;
display: flex;
flex-direction: row;
align-content: flex-end;
align-items: flex-end;
}
.small {
font-size: 1rem;
font-family: "Crimson Text";
font-style: italic;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
margin-bottom: 25px;
}
.big {
font-size: 13rem;
font-family: Jost;
display: inline-block;
line-height: 13rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.word {
line-height: 1rem;
}
<div class="main">
<span class="big">BIG</span>
<span class="small">
<span class="word">Sony A7III</span>
<span class="word">16-35mm and 85mm</span>
<span class="word">Nikon D810</span>
<span class="word">Landscape and Moments</span>
<span class="word">Photography and Film</span>
</span>
<div class="big">WORD</div>
</div>
2条答案
按热度按时间wljmcqd81#
你是这个意思吗?
这是CSS:
我只需要使小类和大类的名称显示属性都为“inline-block”
nimxete22#
align-items: last-baseline
看起来很接近,但是对于容器中较小的文本,它似乎不能完美地工作: