如何将图像连成一排

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/