【发布时间】：2019-10-05 03:02:07
【问题描述】：
我总是卡在垂直对齐的文本上，今天我对如何在需要设置样式的轮播中实现这一点有很大的障碍。
如何获取每个元素垂直中间的文本和箭头？
这是我的代码：
#page {
text-align:center;
font-family: sans-serif;
.case {
width: 200px;
border-radius: 0.3em;
color: white;
background-color: grey;
margin: 0 auto;
app-dashboard-case {
width: 100%;
}
.selector {
padding: 0;
display: flex;
.selector-previous, .selector-next {
border-radius: 1rem 0 0 1rem;
max-width: 1rem;
cursor: pointer;
justify-content: center;
padding: 0;
align-content: center;
display: flex;
flex-direction: column;
&:hover {
background-color: darken(grey,10%);
}
fa-icon {
font-size: 3em;
}
}
.selector-next {
border-radius: 0 1rem 1rem 0;
}
.selector-middle {
padding: 10px;
text-align: left;
justify-content: center;
align-content: center;
display: flex;
flex-direction: column;
div {margin-bottom: 0em;}
}
}
}
}<head>
<script src="https://kit.fontawesome.com/30b81c4dfc.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="page">
<div class="row case">
<app-dashboard-case>
<div class="col case-container">
<div class="row selector">
<div class="col case selector-previous">
<fa-icon class="ng-fa-icon" icon="caret-left">
<svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-left" class="svg-inline--fa fa-caret-left fa-w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M192 127.338v257.324c0 17.818-21.543 26.741-34.142 14.142L29.196 270.142c-7.81-7.81-7.81-20.474 0-28.284l128.662-128.662c12.599-12.6 34.142-3.676 34.142 14.142z"></path></svg>
</fa-icon>
</div>
<div class="col case selector-middle">
<div><label>Ref: </label>OurRefNo1234</div>
<div><label>Name: </label>A N Other</div>
<div><label>Date of Birth: </label>01/02/2000</div>
</div>
<div class="col case selector-next text-right">
<fa-icon class="ng-fa-icon" icon="caret-right">
<svg role="img" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-right" class="svg-inline--fa fa-caret-right fa-w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path fill="currentColor" d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"></path></svg>
</fa-icon>
</div>
</div>
</div>
</app-dashboard-case>
</div>
</div>
</body>【问题讨论】：
-
@ewe-ex-dee-sign-er ，检查在stackoverflow上添加sn-ps的方式。请尽量避免为此使用外部资源！！！我编辑了这个问题，使其更具可读性和内部 StackOverflow 指南。 stackoverflow.com/help/how-to-ask
标签： css flexbox vertical-alignment