如何將圖像連成一排

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將以一切爲中心iately。我用你想要的東西爲你創造了一個小提琴。您必須根據需要對其進行修改，但它會將所有按鈕置於容器中。使用媒體查詢以合適的尺寸分解它們。

http://jsfiddle.net/vtgw5zfg/

我有我的手一段時間，並與您的代碼有點亂。這是一個更新版本，它根據尺寸水平和垂直居中。它還使用一些JavaScript和jQuery來集中你的範圍。這並不完美，但應該幫助你開始。

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