flexbox容器中有两个元素。这些元素之一是我创建的Tag
。当标签在flex容器中时,它似乎将文本移到Tag
的顶部。我该如何预防?
我尝试将父容器设置为align-items: center;
,这会缩小Tag
。
HTML
<div>
<span />
<button>Resend</button>
</div>
CSS
div {
display: flex;
justify-content: space-between;
height: 100%;
}
span {
padding: 3px 4.8px;
text-align: center;
line-height: 0.75rem;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1;
font-size: 0.75rem;
font-weight: bold;
border: 1px solid;
white-space: nowrap;
background-color: red;
color: #fff;
border-color: red;
}
button {
display: block;
width: 100%;
text-align: center;
letter-spacing: .5px;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: 0.25s ease;
color: blue;
border-width: 1px;
padding: 2px 4px;
font-size: .857142rem;
border-radius: 4px;
}
图像
答案 0 :(得分:0)
似乎正在发生的是span元素正在增加底部填充以匹配与其相邻的button元素的总高度。该解决方案的一种解决方法是将display:table;
添加到span元素的css中。之后,您可以调整跨度的填充以适合,文本将在跨度中居中对齐。使用display:table
解决此Post中Cris J提出的问题的想法。