为什么反应中的边距不能正常工作？

Question

我正在尝试了解 React 中边距的一些功能，并且仍然是 React 的新手。目前，我有一个包含一些 JSX/HTML 的 render 方法。我正在尝试使用 CSS 来更好地设置样式，但对代码有一些疑问。

1. 在 CSS 中，我使用 Buttons 和 Margin: auto; 将容器中的元素居中 NavBar 但它不起作用。但是当我在.NavBar 中有text-align 时，它可以工作。这是为什么？我认为它可以在 Buttons 中工作，因为它将相对于其父容器居中 -> NavBar。

2.在.NavBar 中，例如当我有高度20% 时，除非我以像素为单位进行硬编码，否则它不会改变。由于 NavBar 是主 App.js 的子级，所以它不会相对于 App 文件起作用吗？

App.js：

import React from 'react';
import {NavBar} from './NavBar/NavBar';

function App() {

  return (
    <div className="AppMain">
      <NavBar/>
    </div>
  );
}

export default App;

App.css：

.AppMain{
    height: 100%;
}

NavBar.js：

import React from 'react';
import './NavBar.css';

export class NavBar extends React.Component{

    render(){
        return(
            <div className="NavBar">
                <button className="Buttons">About</button>
                <button className="Buttons">Contact</button>
                <button className="Buttons">Info</button>
                <button className="Buttons">Home</button>
            </div>
        )
    }
}

NavBar.css：

.NavBar{
    background-color: black;
    height: 20%;
}

.NavBar .Buttons{
    margin-right: 20px;
    margin-left: 20px;
    text-align: center;
    margin:auto;
}

Answer 1

margin: auto; 仅在指定宽度且元素为块级时才有效。看看this answer to understand 与margin: auto; 居中的实际工作原理。

高度不起作用，因为您已将 AppMain 的高度设置为 100%，该高度将在所有内容呈现到 DOM 后计算。您基本上是在尝试计算尚未计算的 100% 的 20%。尝试显式设置 AppMain 的高度，看看会发生什么。 Relevant answer link.

Answer 2

Button 的默认显示是 inline-block。如果你想使用margin: auto，你只需要将显示值改为block

Answer 3

您需要添加一个<div> 将所有按钮包装在一起，然后将margin: auto; 放在div 上，然后您可以从按钮中删除margin:auto;。

希望对你有帮助