Ionic: Làm cách nào để căn giữa div?

Question

TÌNH HÌNH:

Tôi đang làm cho một ứng dụng sử dụng Ionic framework. Trong một trang tôi cần hiển thị một hình ảnh. Hình ảnh này phải được căn giữa theo chiều ngang.

mưu toan 1:

Tiếp theo documentation tôi đã chia một hàng thành ba cột bình đẳng và đưa hình ảnh trong một giây.

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

Nhưng tiếc là hình ảnh không nằm ở giữa. Có xu hướng ở lại nửa bên trái của màn hình.

mưu toan 2:

Đang cố gắng với một số thủ thuật css cũ.

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

Nhưng một lần nữa tôi không nhận được kết quả mong muốn.

câu hỏi:

Làm thế nào tôi có thể tập trung một div trong khuôn khổ Ionic?

Answer 1

Bạn đã tìm thấy câu trả lời của bạn, nhưng tôi sẽ làm một cái gì đó như thế thay vì:

Trong css của bạn:

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

Và sau đó chỉ cần thêm lớp này để hình ảnh của bạn:

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

Bằng cách này bạn không cần phải điều chỉnh từng ima ge của riêng mình và tôi thấy điều này rất mô tả khi bạn xem HTML. Ngoài ra, nó không bị giới hạn ở kích thước hình ảnh cụ thể.

Answer 2

này nên làm việc, chỉ cần thêm col-center lớp:

<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

nỗ lực thứ 2 của bạn hoạt động nếu bạn thêm width phong cách. Chiều rộng phải là chiều rộng của hình ảnh.

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

Answer 4

Để căn chỉnh trung tâm div, lề 0 tự động vẫn là lựa chọn tốt nhất nhưng bạn cần cung cấp khoảng trống thích hợp cho div để tìm phần trung tâm của nó và do đó bạn cần cung cấp cho nó một số.

Cùng với margin 0 auto cũng cung cấp chiều rộng phù hợp để div của bạn có thể tìm thấy vị trí trung tâm của nó.

Answer 5

Trong Ionic Framework 2 bạn hiện có thể sử dụng attribute directivescenter và text-center cho điều đó.

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