我一直在使用Materialise但是在这种格式上遇到了障碍。我似乎无法让它在页面上水平居中。无论我做出什么改变,它都会保持左对齐。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="row center">
<div class="col s1 m1">
<i class="material-icons tiny">star</i>
<p style="margin-top: -5px; font-size: .8em; margin-bottom: -10px;">2016</p>
</div>
<div class="col s1 m1">
<i class="material-icons tiny">star</i>
<p style="margin-top: -5px; font-size: .8em; margin-bottom: -10px;">2017</p>
</div>
<div class="col s1 m1">
<i class="material-icons tiny">star</i>
<p style="margin-top: -5px; font-size: .8em; margin-bottom: -10px;">2018</p>
</div>
</div>
答案 0 :(得分:3)
您可以使用{material}中的col-offset-*
实用程序类来居中页面
另外,避免使用内联样式,而是使用CSS类
.number {
margin-top: -5px;
font-size: .8em;
margin-bottom: -10px;
}
&#13;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<div class="row center">
<div class="col s1 offset-s5">
<i class="material-icons tiny">star</i>
<p class="number">2016</p>
</div>
<div class="col s1">
<i class="material-icons tiny">star</i>
<p class="number">2017</p>
</div>
<div class="col s1">
<i class="material-icons tiny">star</i>
<p class="number">2018</p>
</div>
</div>
&#13;
答案 1 :(得分:-1)