3
堆棧:流星+陣營+材料的UIMateriall-UI刷新指示符居中對齊horizontaly
Here`s我的我的 '主' 渲染器組件的全碼:
// Sorry for not giving material-UI CSS,
// cause it cannot be served as stand-alone CSS
render() {
return (
<div className = "container">
<AppBar title = "test" />
<Tabs /> // Tab contents goes here
<RefreshIndicator
left={70} // Required properties
top={0} // Required properties
status="loading"
style={{
display: 'inline-block',
position: 'relative',
margin: '0 auto' }} />
</div>
);
},
我想使刷新指示器水平居中對齊myTabs的下方,就像這張圖中的旋轉圓圈:
材料的UI here的文件,這個指標帶有以下樣式:
display: 'inline-block',
position: 'relative',
有了這個風格我不能對齊,水平居中,沒有這個款式,我`噸甚至找到它我想要的地方。
我曾嘗試:
- 保證金:0汽車 - >失敗
- 的text-align:中心 - >失敗
- 顯示:柔性 - >失敗的
- 組合1 & 2 - >失敗
- 左= {$(窗口).WIDTH/2-20} - >這工作,但我想使用CSS只
請問您可以創建一個jsfiddle或jsbin來顯示問題嗎?你可以嘗試刪除'position:'relative''並檢查? –
我建議將刷新指標組件包裝在已被分類爲flex的div中。然後用'justify-content:center'來居中。 – lux
@Adiya Singh對不起,但似乎沒有辦法在jsfiddle/jsbin上創建獨立的material-UI示例... Material-UI此次只安裝了NPM安裝。 –