我看到其他人也问过同样的问题,但是解决方案不适用于这个问题。该解决方案最好适用于不同的设备,例如 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/
最佳答案
您想要做的是在您的 buttonyear
div 周围放置一个容器,使所有内容都适本地居中。我用我认为你想要的东西为你创造了一个 fiddle 。您必须根据需要修改它,但它会将所有按钮置于容器的中心。使用您的媒体查询将它们分解为合适的大小。
我有一些空闲时间,稍微弄乱了你的代码。这是一个更新版本,它根据大小将事物水平和垂直居中。它还使用一些 JavaScript 和 jQuery 来居中您的跨度。它并不完美,但应该可以帮助您入门。
关于css - 如何使连续的图像居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26183283/