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

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

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

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

CSS

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

Q&A

解決済

1回答

156閲覧

divの中身をブラウザの中央揃えしたい

tiqua_nibio

総合スコア62

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/07/19 00:02

コードは下の方にあります。

イメージ説明

これなんですが、よく見ると右側に偏っています。
これを中央に揃えられそうでしょうか?
よろしくお願いいたします。

(回答される方にはありがたく思っておりますが、paddingやmarginで最適な数値を入れてください、という回答ではなく、ブラウザの幅に依存しない対策をご教示いただきたいと考えております。)

HTML

1<style> 2.li_1:before{ 3 content: '197.'; 4 padding-right: 30px; 5 font-size: 40px; 6 color: #ddd; 7} 8.li_2:before{ 9 content: '260.'; 10 padding-right: 30px; 11 font-size: 40px; 12 color: #ddd; 13} 14.li_3:before{ 15 content: '443.'; 16 padding-right: 30px; 17 font-size: 40px; 18 color: #ddd; 19} 20.li_4:before{ 21 content: '199.'; 22 padding-right: 30px; 23 font-size: 40px; 24 color: #ddd; 25} 26html { 27 background-color: #000000; 28} 29 30div.container { 31 display: flex; 32 justify-content: center; 33} 34 35div.nested { 36 display: inline-block; 37} 38 39span { 40 display: block; 41} 42 43div.outer { 44 display: inline-block; 45 vertical-align: middle; 46} 47 48ul, ol { 49 float: left; 50 position: relative; 51 left: 50%; 52} 53 54ol { 55 list-style: none; 56} 57 58li { 59 position: relative; 60 left: -50%; 61 padding-left: 30px; 62} 63</style> 64<div class = "container"> 65 <div> 66 <ol> 67 <li class="li_1"> 68 <div class="outer" style="text-align: center;"> 69 <div class="nested"> 70 <span style="font-size:60px;color:#ff0000;font-style:initial;text-align:center;" id="data-1">青鈍</span> 71 </div> 72 </div> 73 </li> 74 <li class="li_2"> 75 <div class="outer" style="text-align: center;"> 76 <div class="nested"> 77 <span style="font-size:60px;color:#ff0000;font-style:initial;text-align:center;" id="data-2">江戸紫</span> 78 </div> 79 </div> 80 </li> 81 <li class="li_3"> 82 <div class="outer" style="text-align: center;"> 83 <div class="nested"> 84 <span style="font-size:60px;color:#ff0000;font-style:initial;text-align:center;" id="data-3">葡萄茶</span> 85 </div> 86 </div> 87 </li> 88 <li class="li_4"> 89 <div class="outer" style="text-align: center;"> 90 <div class="nested"> 91 <span style="font-size:60px;color:#ff0000;font-style:initial;text-align:center;" id="data-4">空色</span> 92 </div> 93 </div> 94 </li> 95 </ol> 96 </div> 97</div> 98 99<div style="color:white;text-align:center;"> 100中<br/>央<br/>点 101</div>

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

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

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

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

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

m.ts10806

2019/07/19 00:56 編集

>ブラウザの幅に依存しない対策を 既にpaddingに固定値が入っている時点でご自身のコード上では「ブラウザの幅に依存しない」が崩れていますが、その前提だと「全部組みなおしてください」という作業依頼になっていませんか?
tiqua_nibio

2019/07/19 01:14

すいません。そのようですね。 li { padding-left: 30px; } を削除すると、少し改善しました。
guest

回答1

0

ベストアンサー

以下を削除。

CSS

1ul, ol { 2 float: left; 3 position: relative; 4 left: 50%; 5} 6 7li { 8 position: relative; 9 left: -50%; 10}

(「paddingやmarginで最適な数値を入れてください、という回答ではなく」とのことなので、paddingの値には触っていません。そのため、見た目上は中央揃えできていないように見えるかもしれません。)

投稿2019/07/19 01:10

編集2019/07/19 01:12
Lhankor_Mhy

総合スコア35865

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

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

tiqua_nibio

2019/07/19 01:16

ありがとうございます。 mts10806さんのご指摘も合わせて、大変参考になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問