Ionic: 어떻게 div의 중심을 잡습니까?

Ionic: 어떻게 div의 중심을 잡습니까?

상황:

Ionic framework를 사용하여 앱을 만들고 있습니다.한 페이지에 이미지를 표시해야 합니다.이 이미지는 수평으로 중앙에 배치해야 합니다.

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

하지만 안타깝게도 이미지가 중심화되려면 멀었다.화면의 왼쪽 절반에 머무르는 경향이 있습니다.

시행 2:

오래된 css 속임수로 시도하고 있어.

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

하지만 다시 한번 나는 원하는 결과를 얻지 못하고 있다.

질문:

Ionic 프레임워크에서 div를 중앙에 배치하려면 어떻게 해야 합니까?

당신은 이미 답을 찾았지만 나는 대신 그렇게 할 것이다.

css:

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

그런 다음 이 클래스를 이미지에 추가합니다.

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

이렇게 하면 각 이미지를 스스로 조정할 필요가 없고 HTML을 보면 매우 알기 쉽고 특정 이미지 크기로 제한되지 않습니다.

Ionic Framework 2에서 속성 지시어를 사용할 수 있게 되었습니다. center그리고.text-center그럴 수 있어요.

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

두 번째 시도는 다음 항목을 추가하면 성공합니다.width스타일. 너비는 이미지의 너비여야 합니다.

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

이거면 될 거야, 그냥 추가해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>

심플:

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

div 중심을 할당하려면 여전히 여백 0 auto가 가장 좋지만, 이를 위해서는 div에 중앙 섹션을 찾기 위한 적절한 공간을 제공해야 합니다.

와 함께margin 0 auto또한 div가 그것의 중심 위치를 찾을 수 있도록 적절한 폭을 지정합니다.

언급URL : https://stackoverflow.com/questions/31050832/ionic-how-to-center-a-div