文本中心與基金會不在ReactJS中工作

我正在使用基礎庫。我想在一個ReactJS中心div，我無法實現它。文本中心與基金會不在ReactJS中工作

這是在普通的香草一個工作示例：http://codepen.io/anon/pen/PqdzZR

<div class="vertical grid-block"> 
<div class="grid-block text-center"><span>Hi there !</span></div> 
<div class="grid-block text-center"> 
    <a class="button" href="#">Test Button</a> 
</div>

但是，這不與ReactJS工作：

var React = require('react'); 

var Comp = React.createClass({ 
    render: function() { 
     return (<div className="grid-frame"> 
       <div className="vertical grid-block"> 
      <div className="grid-block text-center"><span>Instructions to login</span></div> 
      <div className="grid-block text-center"> 
       <a className="button" href="#">Login with Facebook</a> 
      </div> 
      </div> 
     </div>); 
    } 
}); 

module.exports = Comp;

在上述部件，所述按鈕具有造型表明基金會的CSS樣式正在工作。但由於某種原因，div不居中。

所以，問題是如何使用基礎庫在一個ReactJS組件中居中一個div？

來源

2015-07-21 FacePalm

return (<div class="grid-frame">

應該是className？

來源

2015-07-21 07:09:58 gor181

謝謝指出。我已經更新了這個問題。它仍然不起作用。 – FacePalm

檢查DOM並檢查類是否完全定義。您可能會缺少樣式表或類似內容。 – gor181

檢查我的小提琴：https://jsfiddle.net/reactjs/69z2wepo/

也許你忘了加normalize.css？

var Hello = React.createClass({ 
    render: function() { 
     return (<div className="grid-frame"> 
       <div className="vertical grid-block"> 
      <div className="grid-block text-center"><span>Instructions to login</span></div> 
      <div className="grid-block text-center"> 
       <a className="button" href="#">Login with Facebook</a> 
      </div> 
      </div> 
     </div>); 
    } 
}); 

React.render(<Hello name="World" />, document.getElementById('container'));

來源

2015-07-21 21:37:44

不知道React是否正在改變按鈕的顯示屬性？顯示行內塊可以水平居中與文本對齊中心。顯示塊以邊距工作：0 auto;

來源

2015-07-22 16:59:38 rafibomb

文本中心與基金會不在ReactJS中工作

回答

相關問題