LoginSignup
@rempei

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

グリッドレイアウト　文章を折り返した後中央から始める

Q&A

Closed

JavaScriptReact

解決したいこと

写真のような表をグリッドレイアウトで作ったのですが、
文字の折り返しをしたときに写真のような左からではなく
中央から表示したいのですが、どなたか分かる方がいらっしゃいましたら教えてほしいです。

image.png

該当するソースコード

<Row style={{
    height: "auto",
    display: "grid",
    gridTemplateColumns: "0.8fr 1fr 1fr 1fr 1fr ",
    gridTemplateRows: "50px",
}}>
    <Col>ああああああああああああああああ</Col>
    <Col><select></Col>
    <Col><select></Col>
    <Col><select></Col>
    <Col><select></Col>
</Row>

image.png

0 likes

1Answer

Verclene
@Verclene

子要素のColにtext-align:center;(styleに直接指定するならtextAlign:centerでしょうか)するのはどうでしょうか.

0Like

Comments

  1. @rempei

    Questioner

    おぉ！それを試していませんでした。直りました、ありがとうございます。

  2. @rempei

    Questioner

    ちなみに上に画像を追加したのですが、今はグリッドを全部同じcrassNameにして全部同じstyleを適用しているのですが、画像のようにborderが重なるところとそうでない所に線の太さの差ができてしまいます。これを直すいい方法はありますでしょうか？

  3. @Verclene

    tableで実装されていれば,大元のtableにborder-collapse:collapse;できますが,それ以外はうまいことborderを設定しないといけません.
    bootstrapでは「.item+.item{border-left-width:0;}」みたいなことをやってます.

  4. @rempei

    Questioner

    ありがとうございます。参考にさせていただきます。

Your answer might help someone💌

LoginSign Up