web-dev-qa-db-ja.com

セマンティックUI Reactで位置合わせボタンを中央に配置する方法は？

セマンティックUI Reactでボタンを中央揃えにする方法
グリッド、グリッドローを使用していくつかのアプローチを試しましたが、成功しませんでした

import {Segment, Button,Label,Sticky,Grid,Container} from 'semantic-ui-react';
import React, {Component} from 'react';

const GeneralSupportSegment =() => (
    <Segment>
         <Label  ribbon color="blue"  size="large">Support</Label>
         <Button>contact us</Button>
    </Segment>
);

export default GeneralSupportSegment;
reactjssemantic-ui
7
Arash

これはグリッドを使用せずに私のために働いた

<Segment>
    <Label ribbon color="blue" size="large">Support</Label>
    <Segment basic textAlign={"center"}>
        <Button style={{textAlign: "center"}}>contact us</Button>
    </Segment>
</Segment>
2
tahmid.choyon

以下のコードは、semantic-uiからGridを追加する必要がないよりクリーンなソリューションであることがわかりました。唯一のことは、登録/登録フォーム内のボタンを使用したことです。みんなのために働くとは限りません。

私がしたことは

className： 'signUpBtn'

そして私のcssファイル内に私は追加しました

display：flex;

justify-content：center;

JSX：

<Form.Field className="signUpBtn" color="blue" control={Button}> Register </Form.Field>

CSS：

.signUpBtn {
   display: flex;
   justify-content: center;
}
1
Roger Perez