이미지를 연속으로 가운데에 배치하는 방법

Question

나는 다른 사람들이 같은 질문을 한 것을 보았지만 그 해결책은이 문제에 적용되지 않는다. 해결책은 iPhone, iPad 등의 다른 장치에서 작동하는 것이 가장 바람직하므로 일반적인 솔루션이 바람직합니다. 하나의 장치에서만 작동하는 것이 아닙니다. text-align:center을 설정하려고 시도했으며 margin-left:auto과 margin-right:auto을 설정하려고 시도했지만 작동하지 않습니다.

html로 (단지 관련 코드 포함) :

<div class="container"> 


<div class="buttonyear"> <a href="en131.html"><img class="buttonyear" src="./navi/yearen.png" /><span>2014</span></a></div> 
<div class="buttonyear"> <a href="en131.html"><img class="buttonyear" src="./navi/yearen.png" /><span>2013</span></a></div> 
     <div class="buttonyear clearfix"> <a href="en131.html"><img class="buttonyear" src="./navi/yearen.png" /><span>2012</span></a></div> 
    <br/> 
    <br/> 
</div>   <!-- end of navi --> 

CSS는 :

.container { 

    max-width: 48rem; 
    width: 90%; 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 

} 


body{ 

    background-image: url(../images/gradient.jpg); 


} 

// todo improve css..ask on stackoverflow.. 
.navi { 
    width:100%; 
    text-align:center; 

    text-align: center; 
     margin-left: 42%; 
     margin-right: 42%; 

} 



.buttonyear 
{ 
float: left; 

} 

.buttonyear a 
{ 
text-decoration: none; 
} 


.logocontainer { 
    text-align:center; 
} 

.logo { 
    width:180px; 
    height:60px; 
} 


*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 


/* Small screens (default) */ 
html { font-size: 100%; } 

/* Medium screens (640px) */ 
@media (min-width: 40rem) { 
    html { font-size: 112%; } 
} 

/* Large screens (1024px) */ 
@media (min-width: 64rem) { 
    html { font-size: 120%; } 
} 


ul { 
    list-style-type:none; 
} 

.buttonyear { 
    position: relative; 
    width: 42px; 
    height: 20px; 
} 

.buttonyear span { 

    left: 0; 
    position:absolute; 
    width: 100%; 
    color: white; 
    font: 12px Gill Sans; 
    font-weight:600; 
    text-decoration:none; 
    text-align:center; 
    width:42px; 
    height:20px; 
    padding-top:2px; 
    position:absolute; 

} 


.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
.clearfix { 
    display: inline-block; 
} 
html[xmlns] .clearfix { 
    display: block; 
} 
* html .clearfix { 
    height: 1%; 
} 

바이올린 : http://jsfiddle.net/wzhwtvmt/

Answer 1

싶은하는 것은 투입 용기 귀하의 buttonyear divs 주변 모든 것을 중심으로 할 것입니다. 요. 나는 네가 원하는대로 너를 위해 바이올린을 만들었다. 필요에 따라 수정해야하지만 모든 버튼이 컨테이너 안에 배치됩니다. 미디어 쿼리를 사용하여 적절한 크기로 분해하십시오.

http://jsfiddle.net/vtgw5zfg/

나는 내 손에 약간의 시간이 있고, 당신의 코드를 조금 엉망. 다음은 크기를 기준으로 항목을 가로/세로 가운데에 배치하는 업데이트 된 버전입니다. 또한 JavaScript와 jQuery를 사용하여 스팬의 중심을 맞 춥니 다. 완벽하지는 않지만 시작하는 데 도움이됩니다.

http://jsfiddle.net/vtgw5zfg/1/