Text center not working in ReactJS with Foundation -

i using foundation library. want center div in reactjs , unable achieve it.

this working example in plain vanilla : 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> 

but, not work 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 login</span></div>             <div classname="grid-block text-center">                 <a classname="button" href="#">login facebook</a>             </div>             </div>         </div>);   } });  module.exports = comp; 

in above component, button has styling indicating foundation css styling working.but div not centered reason.

so, question how center div in reactjs component using foundation library ?

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

should classname?