-
ID:1NAhwL さんの質問

javascriptにて中央配置のアルゴリズムをどなたか教えていただけないでしょうか。

下記のような例で要素を配置したいと考えています。

-要素が1つの場合
  1
-要素が3つの場合
 123
-要素が5つの場合
12345

左右中央揃えにしたいです。
ちなみにcanvasで生成したshapeを上記のような配置にしたいと考えています。
canvas.width / 2の値に、要素の横幅/2したものをマイナスして〜という感じまではわかります。。
どなたかわかる方いましたらお願いします。

みんなの回答 7 件

ID:fSaKG1 さんの回答

アレってなんだよ。知らねー。

ID:1NAhwL

え、わからないですか?

ID:fSaKG1

テキストエリアへの入力値が常にテキストエリアの縦中央表示になるようにしたいって話?それなら、そんなライブラリを前に作ったわ。

ID:fSaKG1

わかんねーよw画像なり要素なりでってくだりが尚更意味わかんねーよw

ID:1NAhwL

テキストエリアにtext-align:centerを設定すると中央から配置されますよね。それをテキストではなくて、要素や画像で行いたいということです。

ID:fSaKG1

リッチテキストエディターを作るみたいな話?

ID:1NAhwL

みたいな感じです。左右中央配置のアルゴリズムが知りたいです。ちょっと質問文変更してみました。

ID:fSaKG1

逆に何がわからないの?一人で解決出来そうな感じは伝わってくるけども。

ID:1NAhwL

ちょっと考えてみます。。

ID:qcCNRY

すごいじゃん!サンプル見たよ!

ID:nZTedW さんの回答

text-align: centerを設定しても4 2 1 3 5みたいな配置にはならないのでは?
もしそうだとしたら、「こんにちは」と入力したら「****には」と入力されることになる。
ちなみに、好きな要素をtext-align: centerで並べられるようにしたければ、display: inline-block; をつけるといいよ。

ID:1NAhwL

おっしゃるとおりですね。。間違えました!ちなみにcanvasのshapeで実装したいと考えています。

ID:Ccsi9c さんの回答

要素を分解して、奇数と偶数で左右に振り分けたら良いのでは?

ID:HXTHA/ さんの回答

for文で回すじゃん
んで開始ポイントはcenterX - (objectW*n+margin*(n-1))/2
じゃないの?

ID:69LuMy さんの回答

ソレゾレの縦横高さをfor文で足して半分すればそれが真ん中だよ。

ID:fSaKG1 さんの回答

てかそれってfor文で回すんじゃね?

ID:1NAhwL さんの回答

こんな感じになりました。ttp://jsdo.it/KURIRIN/IZTJ なんかもっとスマートにできそうな。。特にifで分けてるところです。皆さんならどうしますか?

ID:2RgkJg

プレゼンテーションはjavascriptで実装しない。特に今回の例はcssで十分。仮にmidiAPIとかと同期させるとしても、jsからのadd classで十分対応可能。

ID:1NAhwL

すいません、ご返答の内容が高度過ぎて理解ができなかったです。。まずプレゼンテーションとはどういったことでしょうか?教えて頂けると助かります。。

ID:2RgkJg

cssでできることをjavascriptで実装するに値する理由ありますか?ってことです。

ID:1NAhwL

理解できました。ですが、cssで実装する場合の方法がわからないです。。

最終更新日:2016-06-23 (3,191 views)

関連するトピックス

ページ上部に戻る