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;
}

Answer 2

您确定需要角度代码吗？我认为最好使用css。

要调整图标大小，您可以使用unique_ptr<char[]>和delete[]属性，或者使用width。要对齐图标，您还可以使用填充或边距。另一种方法是将height设置为图标并使其适当padding值