フッタ内のリンクをマテリアル化して水平に中央に置く

私は、中央に配置する必要があるボタンとして3つのリンクを設定したフッターを持っています。マテリアライズCSSを使用して、私は含まれているdivと最も外側のラッパー行のdivにcenter-alignクラスを関連付けましたが、どちらもうまくいかないようです。ここに私のコードです。どんなアドバイスも非常に高く評価されます。ありがとう。フッタ内のリンクをマテリアル化して水平に中央に置く

.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

フッタ内のリンクをマテリアル化して水平に中央に置く

答えて

関連する問題