css - 元素不会在 Modal 中居中

Question

我目前正在使用 React Bootstrap 模态。我正在尝试使用 flexbox 将模式中的元素居中，但是这样做有很多麻烦。下面是我的代码，以及它目前的样子。

import { Modal } from 'react-bootstrap'
import React from 'react';
import { Button } from 'react-bootstrap';
import * as welcome from '../../styles/welcome'

class Welcome extends React.Component{
constructor(props){
   super(props)
   this.state = {
    showModal: true
 }
this.close=this.close.bind(this)
this.open=this.open.bind(this)
}

 componentWillReceiveProps(nextProps){
  debugger
  if(nextProps.modal_content !== this.props.modal_content){
    this.setState({ showModal: true });
 }
}

close(){
  this.setState({ showModal: false });
}

open() {
  this.setState({ showModal: true });
}

 render() {

return (
  <div>
    <Modal style={welcome.welcomeBody} show={this.state.showModal} onHide={this.close}>

        <div style={{display: 'flex', justifyContent: 'center'}}>
           <div style={{backgroundColor: 'black', border: '1px solid black', borderRadius: '100%', width: '50px', height: '50px'}}></div>
       </div>


    </Modal>
  </div>
);
}
 }

导出默认欢迎

Answer 1

您在 image 中应用 flex 以使其居中对齐...这是错误的...

Flex 始终应用于 parent 容器，以便其子项使用 flex 功能。

将您的image 包裹在div 中，然后应用display:flex 和justify-content:center 到该 div，以便图像居中对齐。

<div style={{display: 'flex',justifyContent: 'center'}}>
  <img src="pic.png"></img>
</div>

<div style="display: flex;justify-content: center;">
  <img src="http://via.placeholder.com/350x150">
</div>

更新代码

<div style="display: flex;justify-content: center;">
  <div style="background-color:black;border:1px solid;height:50px;width:50px;border-radius:50%;"></div>
</div>