当我在浏览器（Chrome和Safari）中运行html以下时会发生这种情况。不能正常行为。我错过了什么？
使用Materialise（materializecss.com）框架，没有物质化css的额外css。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="keywords" content="styling, interieur, kleur, inrichting">
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-
rc.2/css/materialize.min.css">
<style>
.btn-floating {margin: auto;}
</style>
<title>BOOST-Restyling Interieur Styling</title>
<link rel="icon" type="image/gif" href="img/boost.ico">
</head>
<body>
<div class="center">
<div class="left">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Naar vorig project"
href="prj-5-detail.html"><i class="material-icons">chevron_left</i></a>
</div>
<div class="center">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Terug naar
projecten" href="projecten.html"><i class="material-icons">close</i>
</a>
</div>
<div class="right">
<a class="btn-floating tooltipped btn-large waves-effect waves-light
blue-grey darken-2" data-position="bottom" data-tooltip="Naar volgend
project" href="prj-2-detail.html"><i class="material-icons">
chevron_right</i>
</a>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Compiled and minified Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-
rc.2/js/materialize.min.js"></script>
</body>
</html>
解决方案似乎是使divs display: inline-block;。然后他们将在一条线上对齐。
你可以编辑代码预览图标吗？