데스크톱보기에서 이미지를 왼쪽 정렬하고 모바일보기에서 가운데에 배치하려면 어떻게해야합니까?

Question

나는 주로 갤러리로 구성된 사이트 : http://www.mammothnewyork.com/을 보유하고 있습니다.

나는, (예를 들어, 당신이 "Andela"갤러리 아래로 스크롤하면) 세로 형식에 어떤 이미지를 가지고있다. 바탕 화면에서

:

나는 그들이 바탕 화면에 왼쪽 정렬되어야합니다. 즉 왼쪽에 이미지가 있고 오른쪽에 검은 색 이미지가 있습니다. 내 테스트 서버에 표시되는 "Andela"섹션을 여기에서보실 수 있습니다. http://45.55.217.186/. 그러나이 방법은 모바일에서 엉망이됩니다. 모바일에

:

나는 그 중앙에 배치하고 싶습니다. 현재 사이트에서와 마찬가지로 http://www.mammothnewyork.com/ 그러나 이러한 접근 방식은 데스크톱에서 왼쪽 정렬하지 않습니다. 위에서 언급 한 두 사이트에

이미지는 수동으로 내가 요구하고 무엇을 보여주기 위해 포토샵 날에 검은 색에 배치되었습니다. 그렇지 않으면 원본 이미지 자체가 검정색 배경이 아닐뿐입니다.

나는 주변에 만지작 거렸다있다 : background: url(img/andela/Andela-01.jpg) no-repeat center center; 이 no-repeat left center을 사용하지만 데스크톱과 모바일 모두 내 문제가 해결되지 않습니다. Andela에 대한 인 flexbox 슬라이더와 해당 이미지에 대한

나의 현재 CSS는 다음과 같습니다

이

<section id="andela" class="gallery section wait"> 

     <div class="container"> 
      <h2 class="title lighttext">Andela</h2> 
     </div> 

     <div id="galleryandela" class="slides-wrap fill"> 
      <div class="slides"> 

       <div class="slide"> 
        <span class="img" style="background: url(img/andela/Andela-01.jpg) no-repeat center center; background-size: cover;"></span> 
        <p class="lighttext" style="top:4%;"></p> 
       </div> 

       .... 
       .... 
       .... <!-- TRUNCATED HTML FOR OTHER DIVS --> 
       .... 
       .... 

       <!-- slide last --> 
       <div class="slide last"> 
        <span class="img" style="background: url(img/andela/Andela-20.jpg) no-repeat center center; background-size: cover;"></span> 
        <!-- <p class="addbg" style="top:72%;"></p> --> 
       </div> 

      </div> 

      <nav class="pager"> 
      </nav> 

      <!-- <p class="pager-txt">Explore more using the boxes above or the arrows&nbsp;below.</p> --> 

     </div> 

    </section> 

Answer 1

당신은 같은 것을 수행 할 수 있습니다 자세한 내용은

@media only screen and (max-device-width: 736px) { 
    . img { 
    margin:0 auto !important; 
} 

을 확인 http://www.w3schools.com/css/css_rwd_mediaqueries.asp