Ионный: как центрировать div?

СИТУАЦИЯ:

Я создаю приложение, используя Ionic framework. На одной странице мне нужно отобразить изображение. Это изображение должно быть горизонтально центрировано.

ATTEMPT 1:

Следуя документации я разделил одну строку на три равных столбца и поместил изображение во второй.

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

Но, к сожалению, изображение должно быть сосредоточено. Старайтесь оставаться в левой половине экрана.

ATTEMPT 2:

Попытка с некоторыми старыми трюками css.

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

Но снова я не получаю желаемого результата.

ВОПРОС:

Как я могу центрировать div в Ionic framework?

Ответ 1

В Ionic Framework 2 теперь вы можете использовать директивы атрибутов center и text-center для этого.

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

Ответ 2

Вы уже нашли свой ответ, но я бы сделал что-то подобное:

В вашем css:

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

А затем просто добавьте этот класс к вашему изображению:

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

Таким образом, вам не нужно настраивать каждое изображение отдельно, и я нахожу это очень наглядным, когда вы смотрите на HTML. Кроме того, оно не ограничено определенным размером изображения.

Ответ 3

Ваша вторая попытка работает, если вы добавите стиль width. Ширина должна быть шириной изображения.

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

Ответ 4

Это должно работать, просто добавьте col-center класс:

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

Ответ 5

Чтобы назначить div-центр, маркер 0 auto по-прежнему является лучшим вариантом, но для этого вам нужно предоставить правильное пространство для div, чтобы найти его в центральной части, и поэтому вам нужно предоставить его с помощью.

Наряду с margin 0 auto также задайте правильную ширину, чтобы ваш div мог найти центральное расположение.

Ответ 6

Просто:

<div align="center">
    <img style="height:100px;width:100px" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" />
</div>