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 div周围放置一个容器，将所有内容放在适当的位置。我用你想要的东西为你创造了一个小提琴。您必须根据需要对其进行修改，但它会将所有按钮集中在容器中。使用您的媒体查询以正确的尺寸分解它们。

http://jsfiddle.net/vtgw5zfg/

我有一些时间在我的手上，并且稍微弄乱了你的代码。这是一个更新版本，根据大小水平和垂直居中。它还使用了一些JavaScript和jQuery来集中你的范围。它并不完美，但应该帮助你开始。

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

如何将图像连续居中

1 个答案: