आयनिक

Question

में किसी पृष्ठ के केंद्र में एक छवि को संरेखित कैसे करें, मैं पृष्ठ के एक छवि (लोगो) को केंद्र (दोनों क्षैतिज और लंबवत) को संरेखित करना चाहता हूं?

<ion-view hide-nav-bar="true"> 
<ion-content class="backgound-red "> 
<section class = "home-container"> 
     <div class="row icon-row"> 

     <div class="col"> 
        <h1 class="text-white text-center">My Application </h1> 
      <h4 class ="text-white text-center ">version 1.0.0</h4> 
     </div> 
    </div> 

    <div class="row row-center" > 
     <div class="col text-center" > 
      <img alt="Logo" height="100" src="img/logo.png" > 
     </div> 
     </div> 
    <div class="row icon-row"> 

     <div class="col "> 
      <a class="text-white text-center" href="#" onclick="window.open('http://members.000webhost.com/login.php?'); return false;"> 
       <h5 class ="text-white text-center ">access server</h5></a> 
     </div>   
    </div> 
    </section> 
</ion-content> 

लेआउट है कि मैं चाहता हूँ, छवि मोबाइल स्क्रीन करने के लिए स्वचालित रूप से मध्य में संरेखित करें होना चाहिए। (टैब, फोन)

Answer 1

कोशिश इस सीएसएस कोड जोड़ने, यह क्षैतिज और लंबवत दोनों img केंद्र होगा।

.home-container .row-center img { 
    position:absolute; 
    left: 0; 
    right: 0; 
    margin:0 auto; 
    top:50%; 
    transform:translateY(-50%); 
}