我有以下 block :
<div class="class-journal-mobile-navigation-move left">
<i class="material-icons"> arrow_back_ios</i>
</div>
.class-journal-mobile-navigation-move {
border-radius: 50%;
border: 1px solid #3e4eb8;
width: 50px;
height: 50px;
display: table;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.class-journal-mobile-navigation-move i {
font-size: 24px;
color: #3e4eb8;
display: table-cell;
text-align: center;
}
我需要在父 block 中将 i
元素居中,现在它看起来像:
应用更改后,它现在看起来是:
最佳答案
你可以使用 flexbox:
代替显示:表格;对于类日志移动导航移动,
h1, p {
font-family: Lato;
}
.class-journal-mobile-navigation-move {
border-radius: 50%;
border: 1px solid #3e4eb8;
width: 50px;
height: 50px;
/* display: table; */
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
}
.class-journal-mobile-navigation-move i {
font-size: 24px;
color: #3e4eb8;
/* display: table-cell; */
text-align: center;
}
<div class="class-journal-mobile-navigation-move left">
<i class="material-icons"><</i>
</div>
关于html - 如何通过水平父 block 使图标居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56398850/