css - 如何使连续的图像居中

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%;
}

fiddle :http://jsfiddle.net/wzhwtvmt/

Answer 1

您想要做的是在您的 buttonyear div 周围放置一个容器，使所有内容都适本地居中。我用我认为你想要的东西为你创造了一个 fiddle 。您必须根据需要修改它，但它会将所有按钮置于容器的中心。使用您的媒体查询将它们分解为合适的大小。

http://jsfiddle.net/vtgw5zfg/

我有一些空闲时间，稍微弄乱了你的代码。这是一个更新版本，它根据大小将事物水平和垂直居中。它还使用一些 JavaScript 和 jQuery 来居中您的跨度。它并不完美，但应该可以帮助您入门。

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