質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

20179閲覧

コンポーネントの中央揃えの方法。 material ui on Reactjs。

MOTOMUR

総合スコア195

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2017/10/30 14:28

編集2017/10/31 04:20

material uiとreactjsにて、ウェブアプリの作成をしています。

現在、作成した機能を中央揃えしたく、試行錯誤しましたが、一向に中央揃えにならず、質問した次第です。

中央揃えしたい例:

js

1 <div> 2 <Card> 3 <CardTitle title='Make new post' subtitle={this.state.username} /> 4 <CardText> 5 <p> 6 <TextField 7 id="post_title" 8 floatingLabelText="type the title" 9 value={this.state.post_title} 10 onChange={this.handleChange_title} 11 /> 12 <br /> 13 <TextField 14 floatingLabelText="type the body" 15 multiLine={true} 16 value={this.state.post_body} 17 onChange={this.handleChange_body} 18 multiLine={true} 19 rows={2} 20 /> 21 <br /> 22 <RaisedButton 23 label="posting" 24 secondary={true} 25 onClick={this.handleSubmit} 26 /> 27 <br /> 28 </p> 29 </CardText> 30 </Card> 31 </div>

この部分を中央揃えにするには、どのようにcssを記述し、importし、どこのタグにどう書き込めばいいかを教えていただけると幸いです。

参考までに現在の配置状態は
イメージ説明
このような状態です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

Gridを使うと中央揃えできます

<Grid container alignItems="center" justify="center"> <Grid item xs={8}> <Card> ・・・・ </Card> </Grid> </Grid>

投稿2021/04/03 07:10

gnx_vw903

総合スコア74

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自己解決

それぞれの要素の親
たとえば
<Cardtext>

<Cardtext
style={{
margin:'auto',
width:'50%'
}}

とすればできます。

投稿2017/10/31 04:52

MOTOMUR

総合スコア195

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問