現在、ボタンを「.row」の残りの部分と垂直方向に中央揃えにしようとしています。
ここに私が現在持っているものがあります。style="vertical-align: center;"を追加するようなものを試してみました 異なる要素に移動しますが、ボタンは移動しません。私が見つけた唯一の解決策は、「top: 100px;」のようなものでそれらを下に移動することです。もちろん、すべての画面サイズで機能するわけではないため、これは効率的なソリューションではありません
ボタンは独自の div (.col.s3) にあり、.row でボタンを水平方向に配置するのに役立ちます。ここでの目的は、2 つの外側のボタンを中央のグループ (.col.s6) の垂直方向の中央に配置することです。
これらの要素を垂直方向に簡単に中央揃えする方法はありますか?
ここで例を確認してください: https://jsfiddle.net/nn35pj3j/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css">
</head>
<body>
<div class="row">
<div class="col s3">
<!-- First Button -->
<a class="btn-floating btn-small waves-effect waves-light red left" style=""><i class="mdi-content-add"></i></a>
</div>
<!-- Middle -->
<div class="col s6">
<h2 class="header" style="text-align: center">Buttons</h2>
<div>
<a class="waves-effect waves-light btn">One</a>
<a class="waves-effect waves-light btn">Two</a>
<a class="waves-effect waves-light btn">Three</a>
<a class="waves-effect waves-light btn">Four</a>
<a class="waves-effect waves-light btn">Five</a>
<a class="waves-effect waves-light btn">Six</a>
<a class="waves-effect waves-light btn">Seven</a>
</div>
</div>
<div class="col s3">
<!-- Second Button -->
<a class="btn-floating btn-small waves-effect waves-light red right"><i class="mdi-content-add"></i></a>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
</body>
</html>