将divs左中右对齐并实现时阻止行为

Question

当我在浏览器（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>

Answer 1

另一答案