我试图垂直居中我的标签内容,但是当我添加CSS样式时display:inline-flex,水平文本对齐消失.
如何为每个标签创建文本对齐x和y?
* { box-sizing: border-box; }
#leftFrame {
background-color: green;
position: absolute;
left: 0;
right: 60%;
top: 0;
bottom: 0;
}
#leftFrame #tabs {
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 25%;
}
#leftFrame #tabs div {
border: 2px solid black;
position: static;
float: left;
width: 50%;
height: 100%;
text-align: center;
display: inline-flex;
align-items: center;
}Run Code Online (Sandbox Code Playgroud)
<div id=leftFrame>
<div id=tabs>
<div>first</div>
<div>second</div>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
使用CSS的材质图标,我有以下代码,用于呈现带有图标和文本的链接.
<a href="#"><i class="material-icons">group_work</i>Groups</a>
Run Code Online (Sandbox Code Playgroud)
正如你在下面的图片中看到的那样,文本似乎正在下沉......我希望它们在垂直对齐的中心位置.我怎样才能实现这一目标?
PS.(不是设计师!)