플로팅 이미지

Question

내 고객을위한 제품 이미지 목록이있는 웹 사이트를 만들고 있습니다. 한 줄에는 제품 이미지가 3 개 밖에없고, 고용주가 가득 차 있지 않은 경우 (3 개 미만) 이미지의 중심을 원합니다. 물론 가장 쉬운 방법은 "불완전한"이미지로 다른 클래스를 구현하는 것입니다.하지만이 모든 것이 프로그래밍되지 않은 채 내 고용주에게 웹 사이트 관리를 제공해야하므로이 솔루션은 저에게 적합하지 않습니다.)

여기 내가 무엇을했는지와 함께 codepen이지만 나는 여전히 뭔가를 놓치고 있습니다.

내 JS를 바로 잡으면 정말 고맙겠습니다.

나는 또한이 라인에 대해 매우 두려워 :

$(document).ready(function() 

내가 사진을 그 줄 끝에서로드 할 수는 지저분한 얻을 수 렸기 때문에 그것을, JS에서 사진 작업을하는 가장 안전한 방법은 아니라는 것을 들었다.

<a href="#"></a> 

과 같이 표시됩니다 : 당신은 IMG 로딩에 대한 나의 우려 나에게 분명 도움이 JS 코드 : 그것은 충분하다

Answer 1

를 도청 것

<a href="some_big_image_in_gallery_overlay.jpg" class="gal"> 
    <img src="some_small_image_on_website.jpg"> 
</a> 

희망, 그냥 상자를 정렬 CSS로 :

.fruits { 
    text-align: center; 
} 
.miniImgBox { 
    display: inline-block; 
} 

는 설명 : 이미지에서 float을 제거 상자를 열고 디스플레이를 inline-block으로 설정하십시오. 이렇게하면 text-align: center 규칙을 컨테이너에 적용 할 수 있습니다.

Answer 2

가장 쉬운 방법은 display: inline-block;과 text-align: center입니다. 이 시도 :

.fruits { 
    text-align: center; 
} 
.miniImgBox 
{ 
    width: 370px; 
    display: inline-block; 
    min-height: 1px; 
    margin-left: 30px; 
}