此问题在此处已有答案:
Center one and right/left align other flexbox element(11个答案)
四个月前关门了。
我需要两个div在中心垂直和水平太,按钮和标题在中心,像这样,
我试过的代码在这里,
<div style={{height:'100px', backgroundColor:'grey'}}>
<div className="d-flex justify-content-md-center align-items-center h-100">
<div >
<h1 style={{color:'#EEEEEE'}}>INNOVATE WITH </h1>
</div>
</div>
<div className="" style={{float:'right'}}>
<Button style={{width:'200px'}} className='float-right'>Get Started</Button>
</div>
</div>
它就像这样
当我试着这么做时候,
<div style={{height:'100px', backgroundColor:'grey'}}>
<div className="d-flex justify-content-md-center align-items-center h-100">
<div >
<h1 style={{color:'#EEEEEE'}}>INNOVATE WITH</h1>
</div>
<div className="" style={{float:'right'}}>
<Button style={{width:'200px'}} className='float-right'>Get Started</Button>
</div>
</div>
</div>
它将是
1条答案
按热度按时间7xllpg7q1#
使用
justify-content-between
代替justify-content-md-center
且对于
h1
,使用text-center
和w-100
引导类将其居中对齐。