Question

我有一个页脚，其中三个链接被设置为按钮，需要居中。使用Materialize CSS，我将center-align类附加到包含div和最外层的包装行div，这两者似乎都不起作用。这是我的代码。任何建议将非常感谢。感谢。

＆＃13;

.button {
  position: relative;
  margin-bottom: 0.5em;
  padding: 0.8em 1.7em;
  overflow: hidden;
  background-color: #840081;
  color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.material-wave {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940), opacity 0.3s 0.4s;
  will-change: transform, opacity;
}

＆＃13;

<div class="row">
    <div class="col l4 m4 valign-wrapper">
        <a href="" class="button center-align">Button1</a>
    </div>
    <div class="col l4 m4 valign-wrapper">
        <a href="" class="button center-align">Button2</a>
    </div>
    <div class="col l4 m4 valign-wrapper">
        <a href="" class="button center-align">Button3</a>
    </div>
</div>

＆＃13;

Answer 1

将margin:auto添加到.button课程并试一试。

.button{
margin:auto;
}

Answer 2

代码中的修改：

<head>  
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>            
<style>
.button {
  position: relative;
  margin-bottom: 0.5em;
  padding: 0.8em 1.7em;
  overflow: hidden;
  background-color: #840081;
  color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: block;
width: 200px;
margin: 0px auto;

}
.material-wave {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940), opacity 0.3s 0.4s;
  will-change: transform, opacity;
}
.center_class{text-align:center; display:block; text-align:center; width:100%;}
</style>
</head>
<body>


<div class="row">
    <div class="col l4 m4 valign-wrapper">
        <div class="center_class">
            <a href="" class="button center-align">Button1</a>
        </div>
    </div>
    <div class="col l4 m4 valign-wrapper">
        <div class="center_class">
        <a href="" class="button center-align">Button2</a>
        </div>
    </div>
    <div class="col l4 m4 valign-wrapper">
        <div class="center_class">
        <a href="" class="button center-align">Button3</a>
        </div>
    </div>
</div>
</body>
</html>

页脚中的水平居中链接具体化

2 个答案: