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

Question

내 홈 페이지의 이미지가 왼쪽 정렬됩니다. 반면 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

내가 무엇을 놓치고

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

Answer 1

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

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

a.alignleft { 
    width: 100%; 
} 

Answer 2

, 어떤 작품!

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

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

Answer 3

이미지를 가운데에 배치하는 방법은 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 %인지 확인하십시오).