중앙의 이미지 정렬을 위한 CSS

중앙의 이미지 정렬을 위한 CSS

제 워드프레스 블로그의 위젯에 이미지가 배치되어 있습니다.사이드바보다 크기가 작기 때문에 중앙에 이미지를 배치하고 싶습니다.

저는 현재 다음 코드를 사용하고 있습니다.

<img style="display: block; margin-left: auto; margin-right: auto; padding-bottom: 10px; width: 150px; height: 155px;" src="path">

하지만 이미지는 왼쪽으로 정렬됩니다.

내가 뭘 잘못하고 있는 거지?

감사합니다!

해라margin: 0 auto그들을 따로 선언하는 대신에.추가를 시도해 볼 수도 있습니다.text-align: center용기나 부모의 디브로

왜냐하면 모든 사람들이 비슷한 것을 사용해서 답을 추가했기 때문입니다.저는 이것을 모두와 공유하기로 했습니다.이 솔루션을 사용하여 이미지 센터에 둘 다 사용할 수 있습니다.x (horizontal)그리고.y (vertical)축은 그것이 질문 제목에 쓰여 있기 때문입니다.이것은 를 중계합니다.

<div id="imageBox">
  <img src="my-image.png" alt="some text" />
</div>

사용중

#imageBox
{
    display:flex;
    flex-direction:column;
    justify-content:center; 
    width: 400px;
    height: 400px;
}

#imageBox img
{
    margin: 0 auto;  /* this is where magic will happen!! */
}

다음은 위 접근법의 데모입니다.

수평으로만 중심을 맞추려면flexbox스타일을 생략합니다.img다음을 설정합니다.

#imageBox
{
    display: flex;
    flex-direction: row;  /* changed from column to row  */
    justify-content: center;
}

제가 변경되었음을 알려드립니다.flex-direction로부터의 재산column로.row기본값입니다.지정하지 않으면 계속 작동합니다.설정하기column수직으로 중심을 잡을 겁니다.

플렉스박스 작업 시 주의해야 할 사항들이 있습니다.

• flexbox는 이전 IE 버전에서는 지원되지 않습니다.IE < 11 및 IE-10에 대한 제한된 지원.
• 상위 컨테이너(#imgBox이 경우) 일부 높이와 너비를 가져야 합니다. 그렇지 않으면 이미지가 축 중 하나에 중심을 두지 않습니다.이는 마진(0 auto)의 경우에도 필요합니다. 즉, 일부 기능이 없는 상태에서 작동하려면 0 auto가 필요합니다.width(백분율이 아님),margin: 0 auto속성이 작동하지 않습니다.CSS.

대안적 접근방식:

flexbox에 의존하고 싶다면, 그것은 다시 큰 어려움이 아닙니다.이미지는inline웹페이지에서 자연스럽게 하지만 그들은 여전히 가질 수 있습니다.width그리고.height수평으로 중심을 잡을 수 있도록 하기 위해서는text-align위의 예를 사용하여...

#imageBox 
{
    text-align: center;
}

그러나 그것은 중심을 잡지 못합니다.img수직으로Vertical-align이 경우 이미지의 중심을 수직으로 잡지 않습니다.당신은 이 게시물을 여기서 확인할 수 있습니다.거기에 잘 설명되어 있습니다.

사용할 수도 있습니다.display: table그리고.display: table-cell적용합니다.text-align: center그리고.vertical-align: middle위에table-cell양쪽 축에 내용의 중심을 맞추는 것이지만 정말 필요하지 않다면 이것들을 추천하지 않을 것입니다.

두 가지 해결책을 제시하겠습니다.

1. 상위 div 태그 너비(예: 75% ~ 100%)를 지정해야 합니다.img 태그에 대해 CSS 쓰기:margin-left:250px혹은 그 이상.

2. 이미지를 위해 아래 css 추가position relative; margin-left: 250px또는 그 이상;

행운을 빌어요

사용하다text-align: center;이미지가 포함된 div에서:

.siteorigin-widget-tinymce.textwidget{
  text-align: center;
}

어린이 테마에 올바른 WP 특정 CSS가 있다고 가정할 때 다음을 시도합니다.

<img src="path_to_image_copied_from_media_library" alt="an_alt_label" width="150" height="150" class="aligncenter size-thumbnail" />

size-thumbnail을 사용하면 등록된 엄지 nail 크기의 영상에 기본 스타일링을 사용할 수 있습니다.개별 이미지에 대한 CSS 규칙을 추가하기 시작하면 전체 사이트의 스타일 일관성을 망치는 경향이 있습니다.

이미지 설명을 여기에 입력합니다.

<div id="imageBoxColor">
  <img src="./car.jpg" alt="some text" />
</div>

      #imageBoxColor{
     height: 100vh;
     background-color: rgb(198, 203, 202);
     display: flex;
     justify-content: center;
     align-items: center;
  }

  #imageBoxColor img{
     width: 400px;
     height: 400px;   
  }

이 코드에 따라 이미지 중심을 맞춥니다.당신의 문제가 해결되길 바랍니다.

언급URL : https://stackoverflow.com/questions/33387740/css-for-aligning-image-in-the-center