Materiall-UI刷新指示符居中對齊horizontaly

堆棧：流星+陣營+材料的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只

來源

2016-03-08 Junho Kim

請問您可以創建一個jsfiddle或jsbin來顯示問題嗎？你可以嘗試刪除'position：'relative''並檢查？ –

我建議將刷新指標組件包裝在已被分類爲flex的div中。然後用'justify-content：center'來居中。 – lux

@Adiya Singh對不起，但似乎沒有辦法在jsfiddle/jsbin上創建獨立的material-UI示例... Material-UI此次只安裝了NPM安裝。 –

以下是我如何確保其水平居中。對我很好。

將父組件樣式設置爲position: 'relative'。
將刷新指示器樣式設置爲marginLeft: '50%'和left={-20}（假定大小爲40）。

這裏是代碼（我把它放在CardText組件中）。

... 
    <CardText style={{position: 'relative'}}> 
     <RefreshIndicator 
     size={40} 
     left={-20} 
     top={10} 
     status={'loading'} 
     style={{marginLeft: '50%'}} 
     /> 
    </CardText> 
    ...

來源

2016-03-12 01:02:18 realbug

謝謝！有用。 –

Materiall-UI刷新指示符居中對齊horizo​​ntaly

回答

相關問題

Materiall-UI刷新指示符居中對齊horizontaly