我总是卡在垂直对齐文本上，今天我遇到了一个非常大的障碍，关于如何在我需要设置样式的轮播中实现这一点。
如何获取每个元素垂直中间的文本和箭头？
这是我的代码:
#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>最佳答案
改变“.selector-previous, .selector-next”的样式
#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>关于css - 尝试使用 CSS (flexbox) 垂直对齐文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58236473/