요소

Question

나는 내가 #projCarousel DIV A가 중심되지 않은 것으로 나타났습니다

<div id='projCarousel'> 
    <div class='active'> 
     <a href='http://www.#.com' target='_blank'>#</a> 
     <img id='projImg' src='img/#.png' class='active' /> 
    </div> 
    <div> 
     <a href='http://www.#.com' target='_blank'>#</a> 
     <img id='projImg' src='img/#.png' /> 
    </div> 
</div> 

다음 HTML 코드와 회전 목마를 만들어 중앙하지 않습니다. 좀 검색을했고, a 요소를 중심으로하는 적절한 방법은 내가 여러 가지를 시도하고 문제가 나에게 위치를 사용하여 일을 나타 좁혀했습니다

#projCarousel div a { 
    margin-left:auto; 
    margin-right:auto; 
} 

CSS를 함께 할 것이라는 점을 발견 : 상대 나 디스플레이 : 인라인. 나는이 같은 두 가지를 함께 사용하면 정확한 문제가 무엇인지 잘 모릅니다. 아무도 왜 작동하지 않는지에 대한 조언을하고 있습니까? 이것은 내가 현재 컨베이어에 사용하고있는 CSS입니다. 보조 노트에

#projCarousel { 
    margin: 0px; 
    padding: 0px; 
    position: absolute; 
    min-height: 100%; 
    min-width:100%; 
} 

#projImg { 
width:100%; 
height: auto; 
margin-top: -24px; 
} 

#projCarousel div { 
padding: 0px; 
margin: 0px; 
position:absolute; 
min-width:100%; 
min-height: 100% 
} 

#projCarousel div a { 
    position: relative; 
    top: 100px; 
    left: 44.5%; 
    padding: 20px; 
    border: 10px solid rgba(255, 255, 255, .6); 
    font-size: 20px;  
    display: inline; 
    text-decoration: none; 
    text-align: center; 
width: 200px; 
} 

, 나는 그냥 모두 태그를 제거하고 단지

background-image:url(img/#.png); 

를 사용하지만 그 중 하나가 작동하지 않습니다 쉽게 될 줄 알았는데. 모든 텍스트를 유감으로 생각합니다.

Answer 1

당신은 내가 다음과 같은 솔루션을 제안 할 projCarousel 센터를

<div style='width:100%; margin:0 auto'> 

    <div id='projCarousel'> 
     <div class='active'> 
     <a href='http://www.#.com' target='_blank'>#</a> 
     <img id='projImg' src='img/#.png' class='active'/> 
     </div> 

     <div> 
     <a href='http://www.#.com' target='_blank'>#</a> 
     <img id='projImg' src='img/#.png' /> 
     </div> 
    </div> 

    </div> 

Answer 2

을 다른 사업부의 외부로 팩을 할 수 있습니다 (jsfiddle : http://jsfiddle.net/9KE8r/) :

HTML

<div id="projCarousel"> 
    <div style="background-image: url(http://placehold.it/350x150);"> 
     <a>#</a> 
    </div> 
    <div style="background-image: url(http://placehold.it/200x150);"> 
     <a>#</a> 
    </div> 
</div> 

CSS

#projCarousel{ 
    display: block; 
    position: relative; 
    box-shadow: 0 0 1px blue; 
} 
#projCarousel div{ 
    display: table; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 300px; 
    background-size: cover; 
    background-position: 50% 50%; 
} 
#projCarousel div:first-child{ 
    position: relative; 
} 
#projCarousel div a{ 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
} 

일부 세부 정보 :

• background-image 정의 인라인 (예. HTML에서) 각 div마다 쉽게 다를 수 있습니다.
• 나는 실제로 min-height:100%의 사용을 권장하지 않습니다. 여기 나는 고정 된 px 높이로 갔다. 그러나이 솔루션을 사용하면 귀하의 #projCarousel은 귀하가 어쨌든 그것에 넣은 것의 높이를 사용하게됩니다.
• 부모의 경우 display:table;을 사용하고 어린이의 경우 display:table-cell;을 사용하면 시원한 수직 중심 맞춤이 가능합니다. 필요없는 경우 #projCarousel 안에있는 div을 모두 a으로 바꿀 수 있으며 가장 안쪽에있는 a을 버릴 수 있습니다.