webコーディング。positionの質問です。

htmlで質問です。よろしくお願いします。

positionを使用して、コンテンツ内の
左寄せの指定は可能でしょうか？

よろしくお願いします。

例えば詳細は以下です。
レスポンシブの場合、980pxのコンテンツを中央寄せする場合、
[margin :0 auto;]で中央寄せします。
そのコンテンツで左寄せする場合は[text-align:left;]ですが、
今回はpositionを使って、980pxのコンテンツと同じく、
画面を動かした時に、左の%は同じように
配置したいです。

maisumakun

2018/11/26 04:32

もう少し単語を補ってください。「980pxのmargin:0 suto;」は何が980pxなのかわかりません。

pose

2018/11/26 04:48

言葉足らずで申し訳ありません。コンテンツの大枠を980pxに設定した場合、margin:0 auto;にするとコンテンツの中央にきますが。positionもおなじような設定は可能でしょうか？

yambejp

2018/11/26 05:51

具体的にhtmlやCSSを例示するか、手書きでいいので画像にして説明してください

pose

2018/11/26 12:05

変更しました！

kei344

2018/11/26 12:56

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

pose

2018/11/27 07:41

ご提案ありがとうございます。

Lhankor_Mhy

2018/11/27 08:14

つまり、幅980pxのセンタリングされたボックスの中に、ボックスを左寄せで置きたい、ということでしょうか？

pose

2018/11/27 09:05

そうですね！

Lhankor_Mhy

2018/11/27 09:13

だとすると、positionなしで左寄せされると思うのですが、どのようなことでお悩みですか？

pose

2018/11/27 09:38

もしpositionを使用した場合、画面を動かしてもコンテンツと同じ左右幅のmarignがとれるかをお聞きしたかったです。

Lhankor_Mhy

2018/11/27 09:41

「画面を動かす」とは具体的にはどのような動作ですか？　スクロールさせる、と言う意味でしたら、問題なくマージンは動作すると思います。

pose

2018/11/27 10:05

画面を小さくしていくという感じです。

pose

2018/11/27 10:07

例えば、positionで左から30%のスペースとっても、980pxのmargin 0 auto; と左のスペースが異なってしまいます。何か方法はありますでしょうか？

Lhankor_Mhy

2018/11/27 10:10

繰り返しになりますが、positionを指定しなければ、左寄せになります。何かを必ず指定しなくてはいけないならば、そのスタイルを明示してください。

行動規範の内容に同意します

回答1件

ベストアンサー

モノがないと話が難しそうなので、↓サンプルです。
http://jsfiddle.net/Lhankor_Mhy/kgLqrctw/

html
1<div>
2<p></p>
3</div>

css
1div{
2  width:980px;
3  height:500px;
4  margin:0 auto;
5  background-color:red;
6  position:static;
7}
8p{
9  width:100px;
10  height:100px;
11  background-color:yellow;
12  position:static;
13}