HTML을 사용하여 이미지 정렬

Question

나는 현재 웹 페이지를 디자인하려고합니다. 나는 HTML에 대한 많은 경험이 없으므로 어떻게 계획했는지보고있는 페이지를 얻는 것이 어렵다는 것을 알게되었다. 나는 4 개의 정사각형 이미지를 갖고 싶다. 바로 아래에 두 개가있는 2 개의 꼭대기가 있지만 이것들을 맞추기 위해 애를 쓰고있다. 나는 이것을 연구하려고 노력했지만, 찾을 수있는 것만 큼 텍스트 줄 바꾸기가있는 예제입니다. 감사합니다. 감사합니다.

Answer 1

같은 크기의 이미지입니까?

페이지에 원하는 정보가 없으면 필요한 것을 알기가 어렵습니다. 다음은 간단한 예입니다. http://codepen.io/cecileledoux/pen/mWJyGV

<section> 
    <figure> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" /> 
    </figure> 
    <figure> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" /> 
    </figure> 
</section> 
<section> 
    <figure> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" /> 
    </figure> 
    <figure> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Solid_blue.svg/225px-Solid_blue.svg.png" alt="" /> 
    </figure> 
</section> 

section{ 
    margin-bottom: 20px; 
    text-align: center; 
} 
figure{ 
    display: inline-block; 
}