我想在两个箭头之间插入一个文本行。乍一看似乎很容易，但我不能将所有内容都放在正确的位置：
html, body {
height: 100%;
}
body {
background: #fafafc;
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.grid-container {
width: 50%;
display: grid;
grid-template-columns: 40px auto 40px;
}
.referenceText {
font-family: Arial;
display: inline-block;
font-size: 3vw;
color: #4287f5;
/*outline: 0.1vw dashed red;*/
}
.link {
font-size: 200px;
color: #a7a4bf;
text-decoration: none;
width: 100px;
height: 100px;
outline: 0.1vw dashed orange;
}
.link:hover {
color: #636175;
}<div class="flex-container">
<div class="grid-container">
<a class="link" href="">‹</a>
<div class="referenceText">This is the reference</div>
<a class="link" href="">›</a>
</div>
</div>请注意，我们希望箭头位于屏幕边缘，文本位于中心...
在.grid-container和中进行这些更改.link
.grid-container {
width: 80%;
display: grid;
grid-template-columns: 100px auto 100px;
align-items: center;
justify-items: center;
}
.link {
font-size: 200px;
color: #a7a4bf;
text-decoration: none;
width: 100px;
/* height: 100px; remove height*/
outline: 0.1vw dashed orange;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句