[英]How to center ion side menu images/text
<ion-nav-back-button class="no-text">
</ion-nav-back-button>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-android-more-vertical" menu-toggle="right">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="fabContent"></ion-nav-view>
<ion-nav-view name="menuContent" ng-class="{expanded: isExpanded}" ></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="right">
<ion-header-bar class="dark-bg expanded">
<span class="avatar" style="background: url('img/crown.jpg'); background-size: cover; "></span>
<h2>Thronester</h2>
</ion-header-bar>
如何在不使用CSS的情況下將圖像和文本居中? 我試圖讓圓形圖像和它下面的文字以黑色為中心。 我嘗試過很多東西但沒有得到結果。
你沒有提供任何css
所以我只能給你我的選擇。
我會用這種方式自定義<ion-side-menu>
里面的<ion-header-bar>
:
<ion-header-bar class="bar-profile">
<div class="profile">
<img class="profile-picture" src="http://ionicframework.com/img/docs/mcfly.jpg" />
<h3 class="name">Thronester</h3>
</div>
</ion-header-bar>
使用這個css:
.bar.bar-profile {
background-color: #444;
height: 170px;
}
.bar .profile {
top: 0;
right: 0;
left: 0;
z-index: 0;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
padding-top: 15px;
}
.profile .name {
color: #FFFFFF;
margin-top: 10px !important;
margin-bottom: 10px !important;
}
.profile-picture {
border-radius: 50%;
}
.menu .has-header
{
top: 169px;
}
最后的結果可以在這里看到。
對於> ionic2
<ion-card text-center class="hide-card">
<img src="http://placehold.it/300x200" class="custom-avatar"/>
<h2>Victorcodex</h2>
<p>Have some p tag here</p>
<p>I am the third guy inline here</p>
<hr>
</ion-card>
.hide-card {
-webkit-box-shadow: none!important;
}
.custom-avatar {
height: 30vw;
width: 30vw;
border: 1px solid #fff;
border-radius: 50%;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
如果它只是使您想要的文本和圖像居中,那么您可以使用HTML標記,特別是如果CSS text-align:center; 不起作用。 通常,它對我不起作用,我使用了標簽。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.