将卡内的两个按钮水平放置

Question

我尝试了中心对齐课程。按钮垂直居中但不是水平居中。

我的代码： - （我正在使用反应，所以我在JSX中拥有所有内容）

import React from 'react';

const Landing = () => {
    return (
        <div className="row">
            <div className="card small card-landing valign-wrapper hoverable">
                    <div className="center-align">
                        <a className="waves-effect waves-light btn">Login</a><br />
                    </div>
                    <div className="center-align">
                        <a className="waves-effect waves-light btn">Signup</a>
                    </div>
            </div>
        </div>
    );
};

export default Landing;

Answer 1

如果您希望按钮水平和垂直居中，您可以更改CSS类以获取这些参数：

<div className="background-position: center center">

在两个div上应用这些。

Answer 2

由于您的.card.valign-wrapper是flex行，因此您必须将justify-content: center应用于.card.valign-wrapper。

使用以下css

.card.valign-wrapper {
  justify-content: center;
}

.card.valign-wrapper a.btn {
  margin: 0 5px;
}

Stack Snippet

.card.valign-wrapper {
  justify-content: center;
}

.card.valign-wrapper a.btn {
  margin: 0 5px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

<div class="row">
  <div class="card small card-landing valign-wrapper hoverable">
    <div class="center-align">
      <a class="waves-effect waves-light btn">Login</a><br />
    </div>
    <div class="center-align">
      <a class="waves-effect waves-light btn">Signup</a>
    </div>
  </div>
</div>