Горизонтально центральные ссылки в нижнем колонтитуле с материализацией

У меня есть нижний колонтитул с тремя ссылками, стилизованными под кнопки, которые должны быть центрированы. Используя Materialize CSS, я прикрепил класс выравнивания по центру к содержащим элементам 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>

Источник

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>
Источник

Добавлять margin:auto в .button класс и попробовать.

.button{
margin:auto;
}
Источник
Другие вопросы по тегам