CSS3 상자-align 속성
예
박스 정렬 및 상자 팩 중심의 속성을 모두 사용하여 사업부의 자식 요소 :
div
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
{
width:350px;
height:100px;
border:1px solid black;
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
»시도
더 많은 예제는이 페이지의 하단에.
브라우저 지원
현재, 모든 주요 브라우저 상자-align 속성을 지원하지 않습니다.
사유 재산의 -ms-플렉스 정렬을 지원하여 Internet Explorer 10.
MOZ 박스 - 정렬 지원 - 개인 재산으로 파이어 폭스.
개인 속성 -webkit-박스 정렬을 지원하여 사파리와 크롬.
참고 : 인터넷 익스플로러 9 이전 버전의 IE 탄력 상자를 지원하지 않습니다.
정의 및 지침을 속성
상자 박스 - 정렬 속성은 자식 요소가 정렬되는 방법을 지정합니다.
| 기본값 : | 뻗기 |
|---|---|
| 상속 : | 아니 |
| 버전 : | CSS3 |
| 자바 스크립트 구문 : | .style.boxAlign = "센터"반대 |
문법
box-align: start|end|center|baseline|stretch;
| 값 | 설명 |
|---|---|
| 스타트 | 정상 방향으로 상자를 들어, 각각의 하위 요소의 위쪽 가장자리는 상자의 상단에 배치됩니다. 역방향 케이스의 바닥, 각각의 서브 - 소자의 하단 가장자리를 따라 상자 |
| 끝 | 법선 방향 박스의 경우, 각 자식 요소의 상부 에지는 상자의 바닥을 따라 배치된다. 역방향 박스는 각각의 서브 - 소자의 하단은 박스의 상부를 따라 배치 |
| 센터 | 여분의 공간은, 균등 더 위에 자식 요소의 절반 이상 분할되어, 나머지 절반의 하위 요소의 나머지 |
| 기준 | 경우] 상자 동양 으로 단축 또는 횡 매립 모든 하위 요소들은 기준으로 정렬 배치 |
| 뻗기 | 자식 요소가 포함 된 블록을 채우기 위해 스트레칭 |
온라인 예
소자 박스 배향의 값을 변경
이 예에서는 박스 정렬의 요소의 값을 변경하는 자바 스크립트를 사용하는 방법을 보여준다.