css - AngularJs 中心和调整图标大小

Question

我尝试创建一个网格菜单，它如下所示。我的问题是，我不知道如何调整图标的大小，以便它们适合 AngularJs，而不是 jQuery!我也不知道如何将图标居中。感谢您的帮助:)

menu.html

<ion-content id="my_page">
    <div class="my_row">
        <a class="my_item" href="#/map">
            <i class="icon menu_icon ion-android-walk"></i>
        </a>
        <a class="my_item" href="#/search">
            <i class="icon menu_icon ion-android-search"></i>
        </a>
    </div>

    <div class="my_row">
        <a class="my_item" href="#/">
            <i class="icon menu_icon ion-android-create"></i>
        </a>
        <a class="my_item" href="#/">
            <i class="icon menu_icon ion-android-settings"></i>
        </a>
    </div>
</ion-content>

CSS

.my_container{
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
}

.my_row{
    height:49.95%;
    left:0;
    right:0;
    background-color:#ffffff;
    clear:both;
}

.my_item{
    height:100%;
    width:49.95%;
    background-color:#c0b5b5;
    border: 1px solid #ffffff;
    float: left;  
    vertical-align: middle;  //dont work :(
    text-align: center; 
}

i.menu_icon {
   font-size: xx-large; //Here i want it to fit, not a final size, but   dynamicly
}

Answer 1

尝试给予:

i.menu_icon {
   font-size: 250%;
}

这里的 250% 是相对于父容器的 em 大小而不是 height 的。要使它们垂直居中，您需要使用:

i.menu_icon {
  font-size: 250%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

最后不要忘记给父级 position: relative:

.my_row {
  height:49.95%;
  left:0;
  right:0;
  background-color:#ffffff;
  clear:both;
  position: relative;
}