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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

5回答

812閲覧

表示内容全体をブラウザ画面の中央に表示したい。

jmdajmw

総合スコア302

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

1クリップ

投稿2022/05/25 22:56

編集2022/06/06 08:46

引用テキスト表示内容全体をブラウザ画面の中央に表示する方法がわかりません。

横方向は中央に表示出来ています。
縦方向を中央にする方法がわからないため<br>やfontsizeで地道に調節しています。
なにかうまい手はありますか?

皆様ありがとうございます。
試してみます。

追記
試してみましたが、残念ながら縦方向はセンターに来るものの縦に並べたいものが横に並んでしまいます。

HTML/CSS

1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 2<!DOCTYPE html> 3<html lang="ja"> 4<body> 5 <div id="br_area"></div> 6 <h1 class="m1"> 7 <div id="m1"></div> 8 </h1> 9 <h1 class="m2"> 10 <div id="m2"></div> 11 </h1> 12 </p> 13</body> 14</html> 15 16<script> 17var m1 = "AA"; 18var m2 = "TEST"; 19document.getElementById('m1').innerHTML = m1; 20document.getElementById('m2').innerHTML = m2; 21</script> 22 23<style> 24 .m1 { 25 font-family: Roboto; 26 font-size: 180px; 27 font-weight: bold; 28 line-height: normal; 29 padding: 0 0 0; 30 text-align: center; 31 align-items: flex-end; 32 color: #000; 33 } 34 .m2 { 35 font-family: 'arial black'; 36 font-size: 70px; 37 font-weight: bold; 38 line-height: 0; 39 padding: 0 0px; 40 text-align: center; 41 align-items: flex-start; 42 color: #000; 43 } 44</style>

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2022/05/27 01:09

質問者さん、無言ですが、回答がいくつか出ているのでそれらに対するフィードバックをタイムリーに返してください。役に立った/立たなかったぐらいはすぐに返せるのでは? 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。とにかく無言は NG です。
guest

回答5

0

水平方向も垂直方向も画面中央に配置したいということですね。

css

1body { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 min-height: 100vh; 6 margin:0; 7 padding:0; 8}

サンプル
CSS: Display the content in the center of the browser vertically and horizontally


追記
試してみましたが、残念ながら縦方向はセンターに来るものの縦に並べたいものが横に並んでしまいます。

flex-direction: column; を追加すれば縦並びになります。

css

1* { 2 margin: 0; 3 padding: 0; 4} 5body { 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 flex-direction: column; 10 min-height: 100vh; 11}

投稿2022/05/26 00:47

編集2022/06/05 23:46
hatena19

総合スコア33620

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

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

0

普通に上下中央にすれば良いだけよね?

前提

こちらのコードは掲載したコードだけで、実装した場合に正しい挙動を取ることを保証します。
HTML要素に他のコードを記述した場合思わぬ挙動をする場合があります。試す際は新しくプロジェクトを作成してください。ポイントはposition: absolute;になります。 position:relativeと組み合わせる場合が多いです。
こちらはCSSを学習し始めた方が最初に直面する難しい壁みたいなもので、理解していないと正しく動かすことができません。Youtube等を見て学習してください。


html構造がぐちゃぐちゃしていてわかりづらかったので全部書き直しました。
デザインは色合いやfont等細かい部分以外は一緒にしてます。

JavaScriptでDOM操作して文字を挿入していましたが、どのような意図があるのでしょうか?
JavaScriptは利用せずとも期待の表示を実現することは可能ですし、むしろ使わないのが一般的です。どうしてもDOM操作(JSを利用して文字を挿入したい)のであれば、HTMLの該当文字を消したあと、記載しているJS実装してください。その際JavaScriptファイルの読み込ませ方には気をつけてください。
Bodyの一番最後で読み込む。もしくはheadでdefer属性をつけて読み込んでください。

コード

html

1<div class="contents__wrapper"> 2 <p class="title">AA</p> 3 <p class="sub__title">test</p> 4</div>

css

1.contents__wrapper { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6} 7 8.title { 9 font-size: 180px; 10 font-weight: bold; 11 line-height: 1; 12} 13 14.sub__title { 15 font-family: 'arial black'; 16 font-size: 70px; 17 font-weight: bold; 18 line-height: 0; 19 text-align: center; 20}

以下JavaScriptを使用する場合

js

1// ES5で書かれていましたが、ES6で書き直しました。現在の主流はES6 2// こちらを実装する場合はHTML要素の該当文字は削除してください。 3// 消さなくても動きますが笑 4 5// 1. 挿入先の要素を取得 6// 2. 取得した要素に文字列を挿入 7const targetTitle = document.querySelector('.title') 8targetTitle.textContent = 'AA' 9 10const targetSubtitle = document.querySelector('.sub__title') 11targetSubtitle.textContent = 'test'

投稿2022/06/05 09:20

tee

総合スコア191

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

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

jmdajmw

2022/06/05 09:25

実際のソースコードは常時変化する値をphpから取得して表示しています。
tee

2022/06/05 09:39

こちらのコードは掲載したコードだけで実装した場合に正しい挙動を取ることを保証します。 上記はの文はコードを試す時は余計なものを入れずに確認してみてね。とうことであって、プロジェクトに合わせて修正すれば他のコード混じってても大丈夫ですよ!!
guest

0

縦方向はスクロールする前提のページがほとんどなので「センタリング」という概念が乏しいです。
スクロールを禁止するならこんな感じで

css

1body{ 2display: flex; 3justify-content: center; 4align-items: center; 5height:100%; 6margin:0; 7padding:0; 8}

投稿2022/05/26 00:17

yambejp

総合スコア114572

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

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

0

以下の記事は参考になりませんか?

ブラウザ画面でセンタリング
http://surferonwww.info/BlogEngine/post/2018/11/01/content-horizontally-vertically-centered-on-screen.aspx

CSS のみを使ってブラウザ画面上でコンテンツを上下左右センタリングする方法です。

投稿2022/05/25 23:59

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

水平(Horizontally)、垂直(Vertically)、水平垂直(Both Horizontally & Vertically)のそれぞれでコピペできるCSSがあって分かりやすそうなページを見つけました。

Centering in CSS: A Complete Guide
https://css-tricks.com/centering-css-complete-guide/

投稿2022/05/25 23:50

querykuma

総合スコア777

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問