Css AngularJs居中并调整图标大小

我尝试创建一个网格菜单，它如下所示。 我的问题是，我不知道如何调整图标的大小，使它们适合AngularJs，而不是jQuery！ 我也不知道我如何才能中心的图标。 谢谢你的帮助：）

菜单.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>

尝试给予：

i.menu图标{
字体大小：250%；
}

在这里，

250%

与母容器的

em

大小有关，而不是高度。要使它们垂直居中，需要使用：

i.menu图标{
字体大小：250%；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

最后，别忘了给家长，

位置：relative

：

。我的行{
身高：49.95%；
左：0；
右：0；
背景色：#ffffff；
明确：两者皆有；
位置：相对位置；
}

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

---

例如，要调整图标大小，可以使用

宽度

和

高度

属性，或者使用

填充

进行调整。要对齐图标，还可以使用填充或边距。另一种方法是将

position:relative

设置为图标，并将其设置为适当的

top

value

这与JavaScript或angular无关，都是css。不清楚预期结果是什么它可以使图标居中，但我不得不删除“左50%”，谢谢：）大小仍然是个问题不要动态工作，它可能适合一个屏幕大小，但不是每个屏幕大小：（@FlowX我还不清楚那一个。你能用JS？

.css（“font size”，height，of，div*0.75+“px”）设置它吗

？是的，我可以使用JS，但我不知道如何使用angular JS。@FlowX我也不确定。我已经对jQuery版本发表了评论。请查看。

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