在卡片内水平居中放置两个按钮

Question

我试过中对齐课。按钮垂直居中，而不是水平居中。

​

​

我的代码：-(我使用react，所以我在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;
}

堆栈代码段

​

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

​