水平链接页脚中的链接与实现

我有一个页脚，带有三个链接，它们被称为按钮，它们需要居中。使用Materialise CSS，我将中心对齐类连接到包含div和最外层的包装行div，这两者似乎都不起作用。这是我的代码。任何建议将非常感激。谢谢。水平链接页脚中的链接与实现

.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; 
 
}

<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>

来源

2017-08-01 alirk

添加margin:auto到.button类，并给予一试。

.button{ 
margin:auto; 
}

来源

2017-08-01 10:25:10

辉煌！那样做了。非常感谢！ – alirk

修改代码：

<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>

来源

2017-08-01 10:32:37

水平链接页脚中的链接与实现

回答

相关问题