<分区>
css - 如何使用 flexbox 将两个按钮对齐到 'position:absolute' 的 div 的中心？
到目前为止，这是我的代码的结果:
我实际上想要实现的是将两个按钮水平移动到中心。但目前它们是左对齐的。
这是我想要达到的结果:
我试过 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>不幸的是，我无法让它在 SO 代码片段中工作。工作版本位于 codepen https://codepen.io/kongakong/pen/EpRKPx
我可以使用什么 flex 指令来根据需要放置按钮？
最佳答案
您还需要使父 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>关于css - 如何使用 flexbox 将两个按钮对齐到 'position:absolute' 的 div 的中心？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51672177/