CSS로 중심 맞추기

Question

다음은 HTML 코드를 간략하게 나타낸 것입니다. 나는 요소 B를 고려하지 않고 div A 내에 img C를 중심에 배치하려고합니다. B는 너비가 70px이고 C가 300px 인 배경 이미지를 가지고 있습니다. div A의 너비는 화면의 50 %입니다.

<div id="A"> 
    <div id="B"></div><img id="C" src="x.png" /> 
</div> 

때문에 나는 내가 디스플레이, 여백, 왼쪽 속성의 모든 단일 가능한 조합을 시도 것처럼 보이는이 시점에서 내 CSS 코드를 넣어하지 않습니다. 나는 붙어서 좌절하고있다. 도움!

<div id="A"> 
    <div id="B" onclick="something()" ></div> 
    <img id="C" src="x.png" /> 
</div> 

#containsA { 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    width: 50%; 
    height: 100%; 
    background: white; 
} 

#A { 
    position: relative; 
    top: 0px; 
    width: 100%; 
    height: 70px; 
} 

#B { 
    position: relative; 
    display: inline; 
    background-image: url('some.png'); 
    height: 70px; 
    width: 70px; 
    top: 0px; 
    float: left; 
} 

#B:hover { 
    cursor: pointer; 
    background-image: url('someOther.png'); 
    height: 70px; 
    width: 70px; 
} 

#C { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    height: 70px; 
    width: 300px; 
} 

Answer 1

다음 기술을 사용하면 다른 요소를 무시하면서 요소를 가운데에 맞출 수 있습니다. 이러한 방식으로하지만, 소자는 소자의 정상적인 흐름을 인출하고, 그래서, 용기는이를 무시 :

#A { 
    position: relative; 
} 
#C { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -150px; 
} 

데모 : http://jsfiddle.net/wared/p3XKW/.

다른 제안이 있습니다. 이번에는 컨테이너가 너무 작아 질 때 #B 마스킹을 방지하기 위해 #B을 흐트러 뜨리지 않도록 선택했습니다. 이렇게하면 #B은 클릭 할 수 있지만 컨테이너는 높이를 무시합니다.

#A { 
    position: relative; 
} 
#B { 
    position: absolute; 
} 
#C { 
    display: block; 
    margin: 0 auto; 
} 

데모 : http://jsfiddle.net/wared/dzgLR/을 높이 결코 변화하지 않는 경우이 문제가되지 않을 수 있습니다.이 div#C이 왜

Answer 2

귀하의 HTML이 유효하지 않습니다 너무 많은 일 명 마감 <div>이있다. #A에 text-align:center을 사용할 수는 있지만, 이는 #B에도 영향을 미칩니다. 그래서 나는이 가고 싶어 :

#A img 
{ 
    display: block; 
    margin: auto; 
} 

http://jsfiddle.net/j93sM/

업데이트 :

당신이 CSS를 사용

#B { 
    position: relative; 
    display: inline; 
    background-image: url('some.png'); 
    height: 70px; 
    width: 70px; 
    top: 0px; 
    float: left; 
} 

거의 감지되지 수 있습니다. float을 사용하면 요소는 기본적으로 display: block;이됩니다. 나는 아직도 당신이 원하는 것을 이해하지 못하기 때문에, <img>이 #B이 넘을 것으로 추측합니다. 이 CSS 아 파크,이 작업을 수행 할 수 있습니다

는

#A img 
{ 
    display: block; 
    margin: -70px auto auto auto; 
} 

또한 순수 추상 요소를 기반으로 #C

position: absolute; 
left: 50%; 
transform: translateX(-50%); 

Answer 3

귀하의 설명은 혼란

에서이 문제를 제거 할 수 있지만, 이 작동합니다 :

#a { 
    position: relative; 
} 

#c { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform(-50%, -50%); 
} 

이것은 요소 #b를 고려하지 않고 #a의 #c에 집중하지만 실제로 원하는지 여부는 알 수 없습니다. 항상 접두어를 사용하고 사용하십시오.

Answer 4

나는 어떤 방법이 시도하지 않습니다. 희망이 당신이 원하는 솔루션입니다.

는 HTML :는

<div id="A"> 
    <div id="B"></div> 
    <img id="C" src="http://lorempixel.com/300/300/" alt=""/> 
</div> 

CSS : 여기

#A 
{ 
    width:500px; 
    height:500px; 
    position:relative; 
    border:3px solid red; 
} 

#B 
{ 
    width:70px; 
    height:70px; 
    background:url(http://lorempixel.com/70/70/) no-repeat; 
    border:3px solid blue; 
    z-index:2; 
} 

#C 
{ 
    z-index:1; 
    border:3px solid green; 
} 

#B,#C 
{ 
    display:block; 
    position:absolute; 
    margin:auto; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
} 

나는 단지를 분리하는 데모 목적으로 국경을 사용하고,주의하십시오 DEMO

입니다 집단.

희망이 도움이됩니다.