왼쪽 정렬 이미지를 모바일에 센터링하는 방법은 무엇입니까?

내 홈 페이지의 이미지가 왼쪽 정렬됩니다. 반면 it looks great on desktop 왼쪽 정렬 이미지를 모바일에 센터링하는 방법은 무엇입니까?

, 그것은 내가 노력하고 does not look good on mobile

"센터"모바일 뷰 .entry-image.attachment-post.gsfc-alignleft에 의해 정의 된 이미지.

@media all and (max-width: 675px) { 

.entry-image.attachment-post.gsfc-alignleft { 

    width: 100%!important; 
    max-width: none; 
    text-align: center; 
    margin-left: auto!important; 
    margin-right: auto!important; 
    } 
}

내 웹 사이트는 다음과 같습니다 : parlons-survivalisme.com

내가 무엇을 놓치고

내가 성공하지 않고 다음과 같은 시도?

출처

2017-12-26 Guillaume F.

도움이되는 코드가 충분하지 않습니다. 귀하의 스타일은 이미지를 오프셋 부모의 100 %까지 늘려야하지만 페이지 레이아웃이 어떻게 보이는지 마크 업을 제공하지 않았습니다. –

너비가 위의 이미지를 맞추려면 바깥 쪽 a 태그를 width: 100%으로 설정해야합니다. 예를 들어

: 루카에 의해 조언 다음에 코드를 변경으로

a.alignleft { 
    width: 100%; 
}

출처

2017-12-26 21:40:57

정말 고마워요 루카 !! 완벽하게 작동합니다 :) –

, 어떤 작품!

@media all and (max-width: 675px) { 

a.alignleft { 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 
}

출처

2017-12-26 21:53:27

이미지를 가운데에 배치하는 방법은 2 가지가 있습니다. 첫 번째는 이미지를 'display : inline-block'으로 설정 한 다음 'text-align'속성을 가운데로 설정 한 외부 div로 감싸는 것입니다.

.wrapper-div { 
    width: 100%; 
    text-align: center 
} 
.img { 
    display: inline-block; 
}

다른 해결책은 img가 블록 요소 (display : 블록)인지 확인한 다음 margin-right와 margin-left를 auto로 설정하는 것입니다.

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

아직 버그가있는 경우 부모 요소 너비를 확인하십시오 (작은 화면에서 100 %인지 확인하십시오).

출처

2017-12-26 21:58:29

왼쪽 정렬 이미지를 모바일에 센터링하는 방법은 무엇입니까?

답변

관련 문제