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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

CSS

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

Q&A

解決済

3回答

1004閲覧

中央ぞろえしたいのですが、できません

JunJu

総合スコア16

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

CSS

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

0グッド

1クリップ

投稿2019/05/07 04:46

中央ぞろえしたいのですが、できません

text-align: centerを使っているのですが、真ん中に来ないのでpositionを使って中央に持っていくしかないでしょうか?

該当のソースコード

html

1 <div class="main-wrapper"> 2 <div class="video-wrap"> 3 <video src="CSS/img/Network - 12716.mp4" poster="a" autoplay loop muted></video> 4 </div> 5 <!-- TEAM GREYとTech & Designを中央に持っていきたい --> 6 <h1>TEAM GREY</h1> 7 <p>Tech & Design</p> 8 </div>
.main-wrapper { text-align: center; width: 100%; height: 1279px; position: relative; text-align: center; } .video-wrap { position: absolute; overflow: hidden; } .main-wrapper h1 { margin: 0; font-size: 70px; position: absolute; top: 570px; } .main-wrapper p { margin: 0; font-size: 35px; position: absolute; top: 695px; }

ご回答のほどよろしくお願いいたします。

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

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

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

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

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

miyabi_takatsuk

2019/05/07 04:50

何をどう真ん中に寄せたいのか具体的に記載してください。 テキストを真ん中寄せにするのか、ブロック自体を真ん中に寄せるかによって、まるで方法が変わります。
m.ts10806

2019/05/07 04:51

前の質問に書いた指摘事項そのままです。 質問テンプレート利用してください。 見出しをちゃんと見出しとして使われたほうが良くて、要件のみを具体的に記載すべきです。調べたこと試したことを具体的に記載するのもお忘れなく。
guest

回答3

0

text-alignはインライン要素にしか効きません。
h1pはブロック要素です。
中央寄せしたい要素(.main-wrapper h1とか)のcssにdisplay:inline-block;を追加すると幸せになれるかもしれません。

投稿2019/05/07 04:57

編集2019/05/07 04:58
moredeep

総合スコア1507

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

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

0

abosoluteしてるものに左右の位置指定を入れていないからではないでしょうか?

css

1.main-wrapper h1 { 2 margin: 0; 3 font-size: 70px; 4 position: absolute; 5 left: 0; 6 right: 0; 7 top: 570px; 8} 9 10.main-wrapper p { 11 margin: 0; 12 font-size: 35px; 13 position: absolute; 14 left: 0; 15 right: 0; 16 top: 695px; 17}

投稿2019/05/07 04:50

編集2019/05/07 05:24
siroyama

総合スコア17

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

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

m.ts10806

2019/05/07 04:53

回答もコードはマークダウンのcode利用されたほうが質問者さんにも後から見た人にもわかりやすく取り扱いやすくなりますので。
siroyama

2019/05/07 05:25

指摘ありがとうございます。マークダウンの方法わすれており、今修正いたしました。
guest

0

自己解決

css

1 2.main-wrapper p { 3margin: 0; 4font-size: 35px; 5position: absolute; 6left: 0; 7right: 0; 8top: 695px; 9} 10.main-wrapper h1 { 11margin: 0; 12font-size: 70px; 13position: absolute; 14left: 0; 15right: 0; 16top: 570px; 17}

これでできました!

投稿2019/05/07 05:13

JunJu

総合スコア16

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問