Question

我想将垫子图标的底部与其旁边的img图标对齐。我尝试了很多东西，这就是它目前的样子： https://www.jstatsoft.org/article/view/v071i09

这是我的HTML：

.O2, .triage{
display: inline-block;
vertical-align: middle;
}

.container img {
width: 50px;
height: 50px;
}

.container mat-icon{
font-size: 60px;
width: 60px;
}

CSS：

PS C:\> $PSVersionTable.PSVersion

Major  Minor  Build  Revision
-----  -----  -----  --------
5      1      14393  1715

Answer 1

你可以用一点边距或填充来按下mat-icon吗？

.container mat-icon{
    font-size: 60px;
    width: 60px;
    margin-top: 5px;
}

这样的事情怎么样？

<style>
.container {
    position: relative;
    width: 65px;
    height: 100px;
}

p.triage {
    background: blue;
    width: 30px;
    height: 40px;
    position: absolute;
    bottom: 0;
    right: 0;
}

p.O2 {
    width: 30px;
    height: 20px;
    background: red;
    position: absolute;
    bottom: 0;
    left: 0;
}
</style>
<div class="container">
    <p class="triage"></p>
    <p class="O2"></p>
</div>

Answer 2

使用line-height：

.container
{
line-height: 60px; //or what ever height your container is
}

对齐mat-icon和img

2 个答案: