CSS 상자 정렬 속성을 사용하는 방법-프런트엔드 Q&A-php.cn

CSS 상자 정렬 속성을 사용하는 방법

青灯夜游

풀어 주다： 2019-05-29 09:37:03

원래의

3184명이 탐색했습니다.

CSS box-align 속성은 상자의 하위 요소 정렬을 지정하는 데 사용됩니다. 예를 들어 box-align:start가 설정된 경우 상자의 일반 방향에 대해 각 하위 요소가 위쪽으로 정렬됩니다. 역방향 상자의 경우 각 하위 요소는 아래쪽에 정렬됩니다. 현재 상자 정렬 속성을 지원하는 브라우저는 없지만 IE, Firefox, Safari 및 Chrome은 모두 비공개 속성을 통해 이를 지원합니다.

CSS 상자 정렬 속성을 사용하는 방법

CSS 상자 정렬 속성을 사용하는 방법은 무엇입니까?

box-align 속성은 상자의 하위 요소가 정렬되는 방식을 지정합니다.

구문: 

box-align: start|end|center|baseline|stretch;

로그인 후 복사

속성 값:

start: 일반 방향 상자의 경우 각 하위 요소의 위쪽 가장자리가 상자의 위쪽 가장자리를 따라 배치됩니다. 역방향 상자의 경우 각 하위 요소의 아래쪽 가장자리가 상자의 아래쪽 가장자리를 따라 배치됩니다.

end: 일반적인 방향의 상자의 경우 각 하위 요소의 아래쪽 가장자리가 상자의 아래쪽 가장자리를 따라 배치됩니다. 역방향 상자의 경우 각 하위 요소의 위쪽 가장자리는 상자의 위쪽 가장자리를 따라 배치됩니다.

center: 초과 공간을 균등하게 나누어 절반은 하위 요소 위에, 나머지 절반은 하위 요소 아래에 배치합니다.

baseline: box-orient가 인라인 단일 축 또는 가로인 경우 모든 하위 요소는 기준선에 정렬됩니다.

stretch: 하위 요소를 늘려 포함 블록을 채웁니다.

참고:

현재 상자 정렬 속성을 지원하는 브라우저는 없습니다. Internet Explorer 10은 개인 속성 -ms-flex-align을 통해 이를 지원합니다. Firefox는 개인 속성인 MOZ-box-align을 통해 이를 지원합니다. Safari와 Chrome은 개인 속성 -WebKit-box-align을 통해 이를 지원합니다.

css 상자 정렬 속성 예

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style> 
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, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
</style>
</head>
<body>
<div>
<p>我是居中对齐的。</p>
</div>
<p><b>注释：</b>IE 不支持 box-pack 和 box-align 属性。</p>
</body>
</html>

로그인 후 복사

렌더링:

CSS 상자 정렬 속성을 사용하는 방법