Q&A
プログラムは組んだようにしか動かないので「たまになる」ということはないと思います。何らかの規則性はあるはず。自身が経験した中で「こういときは想定どおりに動き、こういうときは想定どおりに動かない」ソースを提示されてはいかがでしょうか？想定どおりに動かない時は何かしら周囲の影響があるはずです。
100回に1回くらいしか真ん中に行きません。。
margin-right:auto、left:autoのときとはまるで挙動が違いますよね。
回答3件
0
ベストアンサー
CSS basic box model (イントロダクション)
CSS level 3 supports three orientations of flows. In this module we will refer to them as horizontal, vertical-rl and vertical-lr. Horizontal flow has horizontal text and the flow grows downwards. This is the typical flow for most languages, e.g., English, Greek or Arabic. Vertical-rl flow has vertical text and the flow grows to the left. This orientation is often used in Japanese and Chinese. Vertical-lr flow also has vertical text, but the flow grows to the right ("lr" = "left to right"). This is the typical orientation for the Uighur script, one of the scripts used for Mongolian. Horizontal flow that grows upwards is not supported, and neither are diagonal flows nor complex shapes (spirals, zigzag,...). Such texts can usually be achieved with a combination of SVG [SVG10] and CSS. The orientation of a flow is set (indirectly) with the 'writing-mode' shorthand property.
日本語訳
「CSSレベル3は3文書方向のフローをサポートしている。 このモジュール内でこれら水平フロー(horizontal)、右からの垂直フロー(vertical-rl)、 **左からの垂直フロー(vertical-lr)について説明する。 水平フローは水平方向のテキストが下方へと続く。 これは多くの言語、例えば英語、ギリシャ語、アラビア語等にとって一般的なものである。 右からの垂直(vertical-rl)フローは垂直方向のテキストが左へと続く。 この文書方向は日本語と中国語でしばしば用いられる。 左からの垂直(vertical-lr)フローもまた、 垂直方向のテキストだが、右へと続く("lr" = "left to right")。 これはウイグル語で一般的な文書方向で、モンゴル人に利用されている言語である。 水平フローは上方向へ続くものはサポートしない。 斜め方向のような複雑なフローもない(螺旋、ジグザグ。。。)。 そのようなテキストはSVG[SVG10]とCSSの連携によって実現される。 文書方向は'writing-mode'**簡略プロパティで(間接的に)指定される。」
CSS basic box model (用語集)
vertical flow
A flow with vertical text, i.e., whose flow root has vertical-rl or vertical-lr orientation.
日本語訳
「垂直フロー(vertical flow)
垂直方向のテキストを持つフローである。 つまり、フロールートは 右からの垂直か、左からの垂直 文書方向を持つ。」
orientation
The orientation of an element. An element can have one of three orientations:
- horizontal: elements with 'writing-mode' of 'lr-tb' or 'rl-tb' have lines that are horizontal and are added top to bottom
- vertical-rl: elements with 'writing-mode' of 'tb-rl' or 'bt-rl' have lines that are vertical and are stacked from right to left
- vertical-lr: elements with 'writing-mode' of 'bt-lr' or 'tb-lr' have lines that are vertical and are added from left to right
日本語訳
「文書方向(orientation)
要素の方向である。 要素は3つの文書方向を持つことができる。
- 水平方向(horizontal): 要素は'writing-mode'が'lr-tb'か'rl-tb'で上から下へと水平な行を持つ。
- 右からの垂直方向(vertical-rl): 要素は'writing-mode'が'tb-rl'か'bt-rl'で右から左へと垂直な行を持つ。
- 左からの垂直方向(vertical-lr): 要素は'writing-mode'が'bt-lr'か'tb-lr'で左から右へと垂直な行を持つ。」
margin プロパティ (CSS basic box model 規定)
- on normal-flow elements, if the containing block is vertical
- 'auto' on 'margin-right' and 'margin-left' is equal to 0
- on 'margin-top' and 'margin-bottom': see equation (1) below
日本語訳
「通常フロー要素で、 包含ブロックが垂直フローの場合:
・'margin-right'と 'margin-left'の 'auto'はゼロになる
・margin-top'と 'margin-bottom'の場合: 下記、equation (1)参照」
ブロックレベル要素におけるwidth、height、marginsの制約
For block-level elements with horizontal flow in a containing block also with horizontal flow, the computed values of the 'width' and margins must satisfy this constraint:
(width of containing block) = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
日本語訳
「水平フローのブロックレベル要素で、 その包含ブロックもまた水平フローの場合、 'width'の算出値とマージンは以下の等式を成立させなくてはいけない(MUST):
(包含ブロックの幅) = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right」
ここから 8.4 節の下部まで読み飛ばします。
Block-level elements with a vertical flow inside a containing block with a vertical flow are analogous, but with a constraint on height and margin-top/margin-bottom:
(height of containing block) = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
日本語訳
「垂直フローの包含ブロック内の垂直フローのブロックレベル要素も似ているが、 等式はheightとmargin-top、margin-bottomで作られる。
(包含ブロックの高さ) = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom」
writing-mode プロパティ (CSS Writing Modes Module Level 3 規定)
| プロパティ値 | 説明 |
|---|---|
| horizontal-tb | 行送り方向は上から下。横書き。 |
| vertical-rl | 行送り方向は右から左。縦書き。 |
| vertical-lr | 行送り方向は左から右。縦書き。 |
まとめ
親要素もしくは祖先要素に writing-mode:vertical-rl; または writing-mode:vertical-lr; が指定されている場合にmargin-top: auto; margin-bottom: auto; で垂直方向に中央寄せできます。
HTML
1<div style="writing-mode:vertical-rl; height: 7em;"> 2 <p style="margin-top: auto; margin-bottom: auto; height: 3em;">test</p> 3</div> 4 5<div style="writing-mode:vertical-lr; height: 7em;"> 6 <p style="margin-top: auto; margin-bottom: auto; height: 3em;">test</p> 7</div>
Re: speed_e さん
投稿2017/08/30 15:41
総合スコア18194
ありがとうございます。
writing modeプロパティは知りませんでした。
調べたところIE独自のプロパティなのでしょうか。
他のブラウザでwrithing modeを使わずに縦に中央寄せできないでしょうか。
文字を縦に並べたいわけではないので。。
仕様で標準化されている通り、writing-mode は今ではIE独自のプロパティではありません。
IE以外でも使えます。
http://caniuse.com/#feat=css-writing-mode
> writhing modeを使わずに縦に中央寄せできないでしょうか。
回答を読んで頂けているでしょうか。
垂直フローにしなければ「margin-top:auto margin-bototom:autoで要素が真ん中に寄る条件」を満たすことは出来ません。
私の読み落としがないとは断言できない為、抜け道がないか気になるようでしたら、どうぞ仕様書を確認してみて下さい。
> 文字を縦に並べたいわけではないので。。
質問は「margin-top:auto margin-bototom:autoで要素が真ん中に寄る条件って何でしょうか。」でしたので、ここでは条件に関する内容だけ回答しています。
その先に別の目的があるならば、新しく質問をたてて下さい。
もし、margin-top:auto margin-bototom:autoを使うことが垂直方向中央寄せする手段に過ぎず、別の手段でも良かったのであれば、質問の仕方が不適切だったと思います。
仕様書は英語なんですかね？
なかなか理解できませんでした。
知人がコーディングでpositionを使っていて「top:0 bottom:0」を指定することでmargin-top:auto,magin-bottom:autoで真ん中にいっていました。しかしその後私がまねをしてもうまくいきません。writing-modeもそのとき2人とも使っていません。
これについて原因に心当たりなどはないでしょうか。
また、writing-modeを使うと文字列が縦になってしまい、横書きの文字を中央にいかせたいときに使えなくないでしょうか。
このたびはご回答くださりありがとうございました。
まだ全ての仕組みが理解できたわけではありませんが理解を前進させることができ大変助かりました。
0
widthを指定しないと、margin: 0 auto;を指定しても中央寄せにならないですね。
また、中央要せしたい要素がdisplay:block;でないといけません。
※ display: inline;や display:inline-block;は中央寄せにならない。
sample:
.hoge{ margin: 0 auto; width: 960px; display:block; }
※ 元々blockレベルの要素には、display:block;を指定する必要はなし。
投稿2017/08/28 04:19
総合スコア301
あなたの回答
tips
プレビュー
