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

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

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

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

CSS

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

Q&A

解決済

3回答

19708閲覧

DIV内で要素を中央に配置させる

star24star

総合スコア115

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/05/17 05:09

HTML

1<div class="outer"> 2 <p>・・・</p> 3 <img・・・> 4 ・・・ 5</div>

CSS

1/* 2 * outer 3 * 左上から100px、100pxの位置にdiv枠を作る 4 */ 5.outer { 6 width: 100px; 7 height: 100px; 8 position: absolute; 9 text-align: center; 10} 11 12/* 13 * div内の要素 14 * outerDIVの枠の中で中央に配置 15 */ 16

mergin autoなど試してみているのですが、
divで枠を作っても中の要素が中央に配置されません。
原因が分かる方がいらっしゃいましたらご教授頂けると幸いでございます。

ちなみに、div内の要素は画像サイズなどが不規則に変動するため、
要素自体のwidthを指定することができません。

参考
div要素や画像を真ん中寄せにする3つのテクニックと使い分け
【CSS】要素を上下左右に中央寄せする色々な方法

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

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

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

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

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

guest

回答3

0

divで枠を作っても中の要素が中央に配置されません。

というのはdivの枠内で上下左右ともに中央に配置したいということでしょうか
であれば下記のような形になるかと思います(他にも方法はありますが)

html

1<div class="outer"> 2a 3</div>

css

1.outer { 2 display: table-cell; 3 width: 100px; 4 height: 100px; 5 vertical-align: middle; 6 text-align: center; 7 background-color: #f00; 8}

投稿2016/05/17 05:21

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

star24star

2016/05/17 05:42 編集

ご回答有難うございます。 個別でローカルに適当にファイルを作って確認すると確かに中央に配置されるのですが…。 何故気適応されず。。。 ちなみに中央に配置されない原因はどんなものがあるでしょうか…?
退会済みユーザー

退会済みユーザー

2016/05/17 06:02 編集

上記以外にもcssの記述があるのでしたら、他の記述によって上書きされている可能性がたかそうです。 cssを別ファイルに書いてあるのであれば、単純に読み込めていないとかでしょうか。 chrom等のブラウザでデベロッパーツールを使用するとブラウザに表示されている状態でどういうcssが適用されているのか、また他のcssで上書きされてしまっているか等が確認できるので試されてみてはいかがでしょうか。
star24star

2016/05/17 07:06 編集

ファイルが読み込まれていないということはなさそうです。 見た限りでは指定した値が表示されるので上書き(別の値になっている)もされてはいないのですが、 何かによって邪魔されている可能性があるわけですね…。
退会済みユーザー

退会済みユーザー

2016/05/17 11:33

適応されていない状態というのは具体的にどういう状態になっているのでしょうか。 それと確認されてるブラウザは何をお使いでしょうか。 できれば複数のブラウザで確認してみて全てダメなのか、特定のブラウザのみダメなのかを調べてみてください。
guest

0

ベストアンサー

左上から100px、100pxの位置にdiv枠を作る

と書かれていますが、.outer {} には top: 100px; left: 100px; が書かれていないところを見ると、提示されているHTML/CSS以外でいろいろ記述されているのではないでしょうか。

hide2e3rさんの書かれている方法や、質問文に書かれたリンクなどでセンタリングは可能だと思います。それでもセンタリングができないのであれば、状況のスクリーンショットや、CSSやHTMLの構造をもう少し質問文に追記されたほうが回答しやすいと思います。

投稿2016/05/17 12:42

kei344

総合スコア69364

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

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

0

左右のセンタリングは、書かれているCSSでいけると思いますので、
キャッシュが効いてて変更が反映されてないとかではないですか?

ブラウザで、Ctrl + F5Ctrl + Rを押してスーパーリロードしてみてください。

投稿2016/05/17 11:28

root_jp

総合スコア4666

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問