代码之家 › 专栏 › 技术社区 › Anthony Kong

如何使用flexbox将两个按钮与“position:absolute”div的中心对齐?[副本]

flexbox reactjs css

Anthony Kong · 技术社区 · 6 年前

这是迄今为止我的代码的结果:

我真正想要实现的是将两个按钮水平移动到中间。但目前他们是左对齐。

这就是我想要达到的结果:

我试过了 alignItems 但没有效果。我不想用任何 margin 因为容器大小可能会有所不同。

这是我的代码:

const H = "540px";
const W = "720px";

const ContentView = ({ width, height }) => (
  <div style={{ width, height, border: "1 solid red" }}>Hello! Alt View!</div>
);

const ControlView = ({ width, height, onReveal, onCopy }) => {
  const container = {
    width,
    height,
    position: "relative"
  };
  const controlsContainer = {
    width,
    height,
    position: "absolute",
    left: 0,
    top: 0,
    border: "5px solid green",
    display: "flex"
  };
  return (
    <div style={container}>
      <img style={{ width, height }} src="https://i.imgur.com/MQcuk3n.jpg" />
      <div style={controlsContainer}>
        <div
          style={{
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <div>
            <button
              style={{
                width: "400px",
                height: "60px",
                minWidth: "200px",
                display: "block"
              }}
              onClick={onReveal}
            >
              Reveal
            </button>
          </div>
          <div>
            <button
              style={{ width: "400px", height: "60px", minWidth: "200px" }}
              onClick={onCopy}
            >
              Copy Meta
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { playing: false };
  }

  _onReveal() {
    this.setState({ playing: true });
  }

  _onCopy() {
    window.alert("Meta data copied");
  }

  renderAltView() {
    return <AltView />;
  }
  render() {
    const { width, height } = this.props;
    if (!this.state.playing) {
      return (
        <div>
          <h2>Controls</h2>
          <ControlView
            width={width}
            height={height}
            onReveal={() => this._onReveal()}
            onCopy={() => this._onCopy()}
          />
        </div>
      );
    }
    return (
      <div>
        <ContentView />
      </div>
    );
  }
}
ReactDOM.render(<App width={W} height={H} />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

不幸的是,我无法在这样的代码片段中工作。codepen有一个工作版本 https://codepen.io/kongakong/pen/EpRKPx

我可以使用什么flex指令来定位按钮?

2 回复 | 直到 6 年前

Gregor Ojstersek 6 年前

您还需要将父div中的所有子元素居中,因此在您的情况下,需要将flexbox属性设置为controlsContainer。

const controlsContainer = {
    width,
    height,
    position: 'absolute',
    left: 0,
    top: 0,
    border: '5px solid green',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
};

工作示例:

const H="540px";
const W="720px";

const ContentView = ({width, height}) => (
  <div style={{width, height, border: '1 solid red'}}>Hello! Alt View!</div>
)

const ControlView =  ({width, height, onReveal, onCopy}) => {
  const container = {
    width,
    height,
    position: 'relative',
  };
  const controlsContainer = {
    width,
    height,
    position: 'absolute',
    left: 0,
    top: 0,
    border: '5px solid green',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  };
  return (
    <div style={container} >
      <img style={{width, height}} src="https://i.imgur.com/MQcuk3n.jpg" ></img>
      <div style={controlsContainer}>
        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
          <div>
            <button style={{ width: '400px', height: '60px', minWidth: '200px', display:'block'}} 
               onClick={onReveal}>Reveal</button>
          </div>
          <div >
              <button style={{width: '400px', height: '60px', minWidth: '200px'}} 
                onClick={onCopy}>Copy Meta</button>
          </div>
        </div>
      </div>
    </div>
  )
}

class App extends React.Component{
  constructor(props){
   super(props);
   this.state = {playing: false};
  }
  
  _onReveal() {
    this.setState({playing: true})
  }
  
  _onCopy() {
    window.alert('Meta data copied')
  }
  
  renderAltView() {
    return (
      <AltView />
    )
  }
  render(){
    const { width, height } = this.props;
    if (!this.state.playing){
      return (
        <div>
          <h2>Controls</h2>
          <ControlView width={width} height={height} 
                onReveal={() => this._onReveal()}
                onCopy={() => this._onCopy()}
                />
          </div>);
    }
    return (<div><ContentView /></div>);
  }
}
ReactDOM.render(<App width={W} height={H}/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

-2

Lars Munkholm 6 年前

添加 justify-content: center; 到绝对定位DIV(controls容器)