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

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

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

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

CSS

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

Q&A

解決済

4回答

5975閲覧

画像の上に文字を重ねたい

hpd

総合スコア32

HTML

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

CSS

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

0グッド

1クリップ

投稿2016/09/09 00:09

以下画像の上部のように
画像の中央に文字とボタンを重ねたいのですが、
なかなかセンタリングできません。

理想と現状

どうすれば画像の上、
中心に文字、ボタンをセンタリングできますでしょうか?
よろしくお願いします。

HTML

1 2 <figure class="head"> 3 <img src="img.jpg"> 4 <figcaption class= "absolute"> 5 <h1> 6 <p>COPYCOPYCOPYCOPY(h1)</p> 7 </h1> 8 9 <br> 10 <a class="btn" href="#">BUTTON</a> 11 <br> 12 13 </figcaption> 14 </figure> 15

CSS

1.img img { 2 display: block; 3 margin: 0 auto; 4 width:640px; 5 } 6 7.imgtxt h1{ 8 position: absolute; 9 text-align:center; 10 color: #fff; 11 } 12 13.btn { 14 border: 5px solid #FFF; 15 color: #FFF; 16 padding:10px 40px; 17 width: 300px; 18 text-decoration: none; 19 margin: 0 auto; 20 } 21

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

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

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

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

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

Lhankor_Mhy

2016/09/09 03:03

.img や .imgtxt に該当する要素がないと思うのですが、これはただの書き間違いですか? 実際のコードはきちんと書かれてますか?
guest

回答4

0

ここで近いことを回答したので、ヒントにしてみてください。

投稿2016/09/09 05:48

5o5o_wagon

総合スコア214

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

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

0

img要素を使わずdiv要素もしくはspan要素を使い、
cssのbackgroung-imageにて画像を指定すれば、
要素に文字と画像を重ね合わせが出来そうです。

あまりいい例ではありませんが、
こういうことです:

背景画像の位置の設定(background-position) - 背景プロパティ - スタイルシート入門
http://www.webword.jp/cssguide/ref-back/index5.html

投稿2016/09/09 00:53

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

ベストアンサー

h1要素の中にp要素は入れないようにしましょう。そういう場合どうしてもタグで括る必要があるならspan要素を使いましょう。

【h1 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/h1

HTML

1<figure class="head"> 2 <img src="https://placehold.jp/24/cc9999/993333/350x350.png"> 3 <figcaption class= "imgtxt"> 4 <h1>COPYCOPYCOPYCOPY(h1)</h1> 5 <a class="btn" href="#">BUTTON</a> 6 </figcaption> 7</figure>

CSS

1figure.head { 2 display: inline-block; 3 position: relative; 4 text-align:center; 5} 6figure.head img { 7 display: block; 8} 9.imgtxt { 10 left: 50%; 11 position: absolute; 12 top: 50%; 13 transform: translate(-50%, -50%); 14} 15.imgtxt h1 { 16 color: #fff; 17 font-size: 1em; 18} 19.btn { 20 border: 5px solid #fff; 21 color: #fff; 22 display: block; 23 margin: 0 auto; 24 padding: 10px 40px; 25 text-decoration: none; 26} 27```**動くサンプル:**[https://jsfiddle.net/n9ktLdb5/1/](https://jsfiddle.net/n9ktLdb5/1/)

投稿2016/09/09 09:20

kei344

総合スコア69364

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

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

hpd

2016/09/09 11:40

ありがとうございました!!
guest

0

HTML, CSS は詳しくないですが、figure captionなのでどうやっても図の下につくのでは?
style="position: relative"でずらすような方法がここで紹介されてるので、試してみてはどうでしょうか。

投稿2016/09/09 00:55

tnd-.-b

総合スコア247

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問