답변:
시험 background-position:center;
편집 : 이 질문은 많은 견해를 얻고 있기 때문에 추가 정보를 추가 할 가치가 있습니다.
text-align: center
배경 이미지가 문서의 일부가 아니므로 흐름의 일부가 아니기 때문에 작동하지 않습니다.
background-position:center
약칭 background-position: center center
; ( background-position: horizontal vertical
);
background-position:center;
배경 위치 사용 :
background-position: 50% 50%;
배경 이미지의 중앙 또는 위치를 지정하려면 background-position
property 를 사용해야 합니다. background-position 속성 은 요소의 측면 top
과 left
측면 에서 배경 이미지의 시작 위치를 설정합니다 . CSS 구문은 background-position : xvalue yvalue;
입니다.
"xvalue"및 "yvalue"지원되는 값은 길이 단위와 px
같고 왼쪽 및 오른쪽과 같은 백분율 및 방향 이름입니다.
"xvalue"는 배경의 가로 위치이며 요소의 맨 위에서 시작합니다. 그것은 당신이 50px
그것을 사용 하면 요소의 상단에서 "50px"떨어진 것을 의미합니다 . "yvalue"는 같은 조건을 가진 수직 위치입니다.
따라서 background-position: center;
배경 이미지 를 사용하면 중앙에 배치됩니다.
그러나 나는 항상이 코드를 사용합니다 :
.yourclass {
background: url(image.png) no-repeat center /cover;
}
나는 그것이 너무 혼란 스럽지만 다음을 의미합니다.
.yourclass {
background-image: url(image.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
그리고 나는 또한 background-size
새로운 속성이며 압축 된 코드에서 무엇인지 /cover
알지만이 코드는 fill
Windows 데스크톱 배경에서 배경 크기와 위치를 의미 합니다.
당신은에 대한 자세한 내용을 볼 수 background-position
있는 여기 와 background-size
있는 이곳 .
배경 이미지가 세로로 정렬 된 스프라이트 시트 인 경우 다음과 같이 각 스프라이트를 가로로 가운데에 맞출 수 있습니다.
#doit {
background-image: url('images/pic.png');
background-repeat: none;
background-position: 50% [y position of sprite];
}
배경 이미지가 가로로 정렬 된 스프라이트 시트 인 경우 다음과 같이 각 스프라이트를 세로로 가운데에 맞출 수 있습니다.
#doit {
background-image: url('images/pic.png');
background-repeat: none;
background-position: [x position of sprite] 50%;
}
스프라이트 시트가 콤팩트하거나 앞서 언급 한 시나리오 중 하나에서 배경 이미지를 중앙에 배치하려고하지 않는 경우 이러한 솔루션이 적용되지 않습니다.
이것은 나를 위해 작동합니다 :
<style>
.WidgetBody
{
background: #F0F0F0;
background-image:url('images/mini-loader.gif');
background-position: 50% 50%;
background-repeat:no-repeat;
}
</style>
이것은 이미지를 div의 중심에 정렬하는 데 효과적입니다.
.yourclass {
background-image: url(image.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}