AngularJs中心和調整圖標

我嘗試創建一個網格菜單，它看起來像下面。我的問題是，我不知道如何調整圖標大小，以便它們適合AngularJs，而不適用於jQuery！另外我不知道我可以如何居中圖標。感謝您的幫助:)AngularJs中心和調整圖標

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 
}

來源

2016-01-16 FlowX

這與JavaScript或角度無關，是所有的CSS。不清楚預期結果是什麼 – charlietfl

先給：

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

來源

2016-01-16 21:21:09

它可以使圖標居中，但我必須刪除「剩下的50％」，謝謝:) 尺寸仍然是一個問題。％dont動態地工作，它可能適合一個屏幕大小，但不是在每個屏幕大小:( – FlowX

@FlowX我仍然不清楚那個。你可以使用JS？'.css（「font-size」，height_of_div * 0.75 +「px」）'？ –

是的，我可以使用JS，但我不知道，如何做到這一點與角js – FlowX

你確定你需要的角碼？我認爲它更好地使用CSS來代替。

要調整圖標大小，您可以使用width和height屬性，或者使用padding。要調整圖標，您還可以使用填充或邊距。另一種方法是設置position: relative圖標，並得到它適當top值

來源

2016-01-16 21:21:24 Andrew

AngularJs中心和調整圖標

回答

相關問題