React JSX中卡片内两个按钮水平居中的实现问题

看起来你是在用Materialize CSS框架做布局对吧？问题出在*valign-wrapper*和*center-align*的组合使用方式上——*valign-wrapper*本质是一个水平方向的flex容器，你把两个按钮分别放在独立的*center-align* div里，这两个div会作为flex项水平排列，每个只占自身内容的宽度，所以虽然按钮在各自容器里水平居中了，但容器本身并没有在卡片里水平居中，导致整体看起来只有垂直居中效果。

给你两种简单的修复方案：

方案一：合并按钮容器（更简洁） #

把两个按钮放到同一个*center-align*容器中，同时给卡片添加水平居中的flex属性：

import React from 'react';
const Landing = () => {
  return (
    <div className="row">
      <div className="card small card-landing valign-wrapper hoverable" style={{justifyContent: 'center'}}>
        <div className="center-align">
          <a className="waves-effect waves-light btn">Login</a><br />
          <a className="waves-effect waves-light btn">Signup</a>
        </div>
      </div>
    </div>
  );
};
export default Landing;

为什么这样有效： #

• 合并后的*center-align*容器会把里面的按钮垂直排列（用<br>换行），且每个按钮在容器内水平居中
• justifyContent: 'center'会让这个容器在*valign-wrapper*（水平flex容器）里水平居中，加上*valign-wrapper*本身的垂直居中效果，就实现了按钮组在卡片里的完全居中

方案二：保持独立容器的同时调整布局 #

如果你想保留两个按钮的独立容器，可以调整flex方向和容器宽度：

import React from 'react';
const Landing = () => {
  return (
    <div className="row">
      <div className="card small card-landing hoverable">
        <div className="valign-wrapper" style={{height: '100%', flexDirection: 'column'}}>
          <div className="center-align" style={{width: '100%'}}>
            <a className="waves-effect waves-light btn">Login</a>
          </div>
          <div className="center-align" style={{width: '100%'}}>
            <a className="waves-effect waves-light btn">Signup</a>
          </div>
        </div>
      </div>
    </div>
  );
};
export default Landing;

为什么这样有效： #

• 把*valign-wrapper*移到内部div，并设置height: '100%'让它占满卡片高度，flexDirection: 'column'把flex主轴改成垂直方向，让两个按钮容器垂直排列
• 给每个*center-align*容器设置width: '100%'，这样按钮就能在整个卡片宽度范围内水平居中，同时*valign-wrapper*保证了垂直方向的居中

内容的提问来源于stack exchange，提问作者Rohan Pota