Jonic: Jak wyśrodkować div?

Question

SYTUACJA:

Robię aplikację używając Ionic framework. Na jednej stronie muszę wyświetlić obraz. Ten obraz musi być wyśrodkowany w poziomie.

PRÓBA 1:

Po documentation ja podzielona jednego wiersza na trzy równe kolumny i umieścić obraz w drugiej.

<div class="row"> 
    <div class="col col-33"></div> 
    <div class="col col-33"> 
     <img src="{{ data.logo }}" alt=""> 
    </div> 
    <div class="col col-33"></div> 
</div> 

Niestety obraz jest daleko do centrum. Mają tendencję do pozostawania w lewej połowie ekranu.

PRÓBA 2:

Próbując z niektórych starych sztuczek CSS.

<div style="margin: 0 auto;"> 
    <img src=" {{ data.logo }} " alt="" > 
</div> 

Ale znowu nie otrzymuję pożądanego rezultatu.

na pytanie:

Jak mogę wyśrodkować div w jońskim ram?

Answer 1

można już znaleźć odpowiedź, ale chciałbym zrobić coś takiego zamiast:

W swojej CSS:

.center { 
    margin-left: auto; 
    margin-right: auto; 
    display: block; 
} 

A potem po prostu dodać tę klasę do obrazu:

<img src="{{ data.logo }}" class="center" alt=""> 

W ten sposób nie trzeba dostosowywać każdego pliku ima ge na własną rękę i uważam, że jest to bardzo opisowe, gdy patrzysz na HTML. Nie ogranicza się również do określonej wielkości obrazu.

Answer 2

To powinno działać, po prostu dodaj col-center klasę:

<div class="row"> 
    <div class="col col-33"></div> 
    <div class="col col-33 col-center"> 
     <img src="{{ data.logo }}" alt=""> 
    </div> 
    <div class="col col-33"></div> 
</div> 

Answer 3

Twój 2-ty próba działa, jeśli dodać styl width. Szerokość powinna być szerokością obrazu.

<div style="margin: 0 auto; width:100px"> 
    <img src=" {{ data.logo }} " alt="" > 
</div> 

Answer 4

Aby przypisać środek div, margines 0 auto nadal jest najlepszą opcją, ale w tym celu musisz podać odpowiednią przestrzeń do elementu div, aby znaleźć jego środkową część, a zatem musisz ją podać.

Wraz z margin 0 auto również podać odpowiednią szerokość, aby twój div mógł znaleźć jego środkową lokalizację.

Answer 5

W tym przypadku można teraz używać attribute directivescenter i text-center.

<ion-row> 
    <ion-col text-center> 
    <a href="#">My centered text</a> 
    </ion-col> 
</ion-row>