다음은 부모 내부의 인라인 요소를 가로 및 세로로 동시에 정렬하는 기술입니다 .
수직 정렬
1) 이 방법에서는, 우리는 만들 inline-block의) 첫 번째 (또는 마지막 자식으로 (사이비) 요소 의 부모를 , 그 설정 height하는 속성을 100%자사의 모든 높이 취할 부모 .
2) 또한 추가 vertical-align: middle하면 인라인 (-블록) 요소가 줄 공간의 중간에 유지됩니다. 따라서 CSS 선언을 첫 번째 자식 요소 와 요소 ( 이미지 )에 모두 추가합니다.
3) 마지막으로 inline (-block) 요소 사이의 공백 문자를 제거하기 위해 부모 의 글꼴 크기 를 0으로 설정할 수 font-size: 0;있습니다.
참고 : 나는 Nicolas Gallagher의 이미지 교체 기술 을 다음과 같이 사용했습니다.
장점은 무엇입니까?
<div class="container">
<div id="element"> ... </div>
</div>
.container {
height: 300px;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.container:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
#element {
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
font: 16px/1 Arial sans-serif; /* <-- reset the font property */
}
출력
반응 형 컨테이너
OP는 반응 형 컨테이너를 만드는 방법을 이미 알고 있으므로이 섹션에서는 질문에 대답하지 않습니다. 그러나 어떻게 작동하는지 설명하겠습니다.
컨테이너 요소 의 높이 를 가로 / 세로 비율 과 함께 너비 에 따라 변경 하려면 top / bottom padding속성에 백분율 값을 사용할 수 있습니다 .
상단 / 하단 패딩 또는 여백 의 백분율 값 은 포함 블록의 너비를 기준으로합니다.
예를 들어 :
.responsive-container {
width: 60%;
padding-top: 60%; /* 1:1 Height is the same as the width */
padding-top: 100%; /* width:height = 60:100 or 3:5 */
padding-top: 45%; /* = 60% * 3/4 , width:height = 4:3 */
padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9 */
}
다음은 온라인 데모 입니다. 하단에서 선을 주석 처리하고 패널 크기를 조정하여 효과를 확인하십시오.
또한, 우리는 적용 할 수 paddingA와 속성을 더미 자녀 또는 :before/ :after같은 결과를 달성하기 위해 의사 요소입니다. 그러나 참고 하는 것이이 경우에 백분율 값을 padding받는 상대적인 폭 의 .responsive-container자체.
<div class="responsive-container">
<div class="dummy"></div>
</div>
.responsive-container { width: 60%; }
.responsive-container .dummy {
padding-top: 100%; /* 1:1 square */
padding-top: 75%; /* w:h = 4:3 */
padding-top: 56.25%; /* w:h = 16:9 */
}
데모 # 1 .
데모 # 2 ( :after의사 요소 사용)
내용 추가
padding-top속성을 사용 하면 컨테이너 내부의 내용 상단 또는 하단에 큰 공간 이 생깁니다 .
그 문제를 해결하기 위해서, 우리는, 래퍼 소자에 의해 콘텐츠를 포장하여 문서 정상적인 흐름이 소자 분리가 절대 위치를 (BU는 사용 랩퍼 확장 마지막하고 top, right, bottom및 left특성)이 부모의 전체 공간을 채우기 위해, 용기 .
여기 우리는 간다 :
.responsive-container {
width: 60%;
position: relative;
}
.responsive-container .wrapper {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
다음은 온라인 데모 입니다.
모두 함께
<div class="responsive-container">
<div class="dummy"></div>
<div class="img-container">
<img src="http://placehold.it/150x150" alt="">
</div>
</div>
.img-container {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.img-container:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.img-container img {
vertical-align: middle;
display: inline-block;
}
작동하는 데모 는 다음과 같습니다 .
분명히, 브라우저 호환성을::before 위해 의사 요소를 사용하지 않고 요소를 첫 번째 하위 요소로 작성할 수 있습니다 ..img-container
<div class="img-container">
<div class="centerer"></div>
<img src="http://placehold.it/150x150" alt="">
</div>
.img-container .centerer {
display: inline-block;
vertical-align: middle;
height: 100%;
}
업데이트 된 데모 .
max-*속성 사용
상자 안의 이미지를 더 낮은 너비로 유지하려면 이미지를 설정 max-height하고 max-width속성을 지정할 수 있습니다 .
.img-container img {
vertical-align: middle;
display: inline-block;
max-height: 100%; /* <-- Set maximum height to 100% of its parent */
max-width: 100%; /* <-- Set maximum width to 100% of its parent */
}
다음은 업데이트 된 데모 입니다.