div 내에서 (배경) 이미지를 가운데에 배치하는 방법은 무엇입니까? 성공하지 못했습니다. <div id=”doit”> Lorem Ipsum

div에서 배경 이미지를 중앙에 배치 할 수 있습니까? 나는 모든 것에 대해 시도했지만 성공하지 못했습니다.

<div id="doit">
  Lorem Ipsum ...
</div>

//CSS
#doit { background-image: url(images/pic.png); background-repeat: none; text-align: center; }

이게 가능해?

답변

#doit {
    background: url(url) no-repeat center;
}

답변

시험 background-position:center;

편집 : 이 질문은 많은 견해를 얻고 있기 때문에 추가 정보를 추가 할 가치가 있습니다.

text-align: center 배경 이미지가 문서의 일부가 아니므로 흐름의 일부가 아니기 때문에 작동하지 않습니다.

background-position:center약칭 background-position: center center; ( background-position: horizontal vertical);

답변

배경 위치 사용 :

background-position: 50% 50%;

답변

배경 이미지의 중앙 또는 위치를 지정하려면 background-positionproperty 를 사용해야 합니다. 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알지만이 코드는 fillWindows 데스크톱 배경에서 배경 크기와 위치를 의미 합니다.

당신은에 대한 자세한 내용을 볼 수 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%;
}

스프라이트 시트가 콤팩트하거나 앞서 언급 한 시나리오 중 하나에서 배경 이미지를 중앙에 배치하려고하지 않는 경우 이러한 솔루션이 적용되지 않습니다.

답변

이것은 나를 위해 작동합니다 :

#doit{
    background-image: url('images/pic.png');
    background-repeat: no-repeat;
    background-position: center;  
}

답변

이것은 나를 위해 작동합니다 : 

.network-connections-icon {
  background-image: url(url);
  background-size: 100%;
  width: 56px;
  height: 56px;
  margin: 0 auto;
}