我目前正在使用React Bootstrap Modal。我正在尝试使用flexbox将模式内的元素居中,但是这样做很麻烦。以下是我的代码及其当前外观。

css - 元素不会在Modal内部居中-LMLPHP
css - 元素不会在Modal内部居中-LMLPHP

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>
);
}
 }


导出默认欢迎

最佳答案

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

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

image包裹在div中,然后将display:flexjustify-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>

关于css - 元素不会在Modal内部居中,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48740776/

10-11 23:23
查看更多