急いでいます！

画像上の文字列の中央配置

解決済

質問者：jkallnight
質問日時：2015/08/20 15:03
回答数：4件

html初心者です。画像上に文字を（ウィンドウの大きさに関わらず）常に中央配置
したいのですがうまくいきません。

以下は私が試したコードです。

<p align="center" style="position: relative; text-align:center; ">
<img src="●●●.jpg" width="100%" height="240">
<span style=" position: absolute; top: 15px; left:10px ">

<font size="12" color="#ffffff">文字列</font></br><br>
<font size="5" color="#ffffff"><script type="text/javascript"></script></font><br><br>

</span>
</p>
上記のコードだとどうしても文字列が画面左からのピクセル数が固定となってしまいます
原因はコード内のleft:120pxだとわかっているので、text-align: center;に書き換える等、いろいろためしているのですが、どうもうまくいきません。

どなたかご教授いただけないでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

No.4

回答者： ORUKA1951
回答日時：2015/08/20 20:21

携帯電話や印刷機には適用されません。

＿<style type="text/css">

＿</style>
＿<style type="text/css" media="screen">

＿</style>

- 0
- 件

通報する

No.3

回答者： ORUKA1951
回答日時：2015/08/20 19:49

<font>,<center>要素などは使いません。

15年も前のHTML4.01の勧告以来使うことはなくなった・・・
　そのHTML4.01はHTML3の反省の上に作られた物で---私はHTML2の時代から---、それ以前のHTMLは酷い物で、デザインのためのタグや、配置にtableを使うなど。

　現在のHTMLは、文書構造しか書きません。
<p align="center" style="position: relative; text-align:center; ">
　alignは使ってはなりません。代わりにスタイルシートを使います。
<span style=" position: absolute; top: 15px; left:10px ">
　spanは、他に適切な要素がないときにidやclassと併用して文書内での意味--構造を示すのに使います。
<font size="12" color="#ffffff">文字列</font></br><br>
　fontは使いません。スタイルシートを使います。
　</br>は、内容のない要素ですからこの書き方はしません。
　<br/>と書く事はある。(XML,XHTMLの場合
　<br>は通常のHTMLでは登場しません。住所など特殊なときのみ。
　行間はスタイルシートで指定します。
<font size="5" color="#ffffff"><script type="text/javascript">

</script></font><br><br>
　javascriptだとそれが無効な場合無効です。できれば直接書きましょう。
　そうでない場合はSSIを使う。
</span>
</p>

私のHTMLはページのフッターに単純に
<div class="footer">
　<h2>文書情報</h2>
　<div id="documentHistry">
　　<dt id="FIRST-PUBLISHED">First Published</dt>
　　<dd>2013-03-03</dd>
　　<dt id="LAST-MODIFIED">Last Modified</dt>
　　<dd>2013-03-03 12:00:00 (JST)</dd>
　</dl>
　<address>著作表示</address>
</div>
というふうに、文書構造しか書きません。
　たったこれだけですから、HTMLのメンテナンスも楽ですし、スタイルシートも簡単になる。背景画像はHTMLには書きません。

★されたい事は想像ですがfooterに背景画像を全幅で置いて、その上に更新情報などを中央に書きたい。

[サンプル]
　私がここで良く使う雛型(テンプレート)です。とても簡単に文書構造しか書いてないので、あなたでもメンテナンスできるでしょう。もちろん検索エンジンにも最適(SEO)、携帯電話でも印刷機でも・・
　スタイルシートは次の回答で示しますので、とりあえず
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# )
　の右上の[DATA]をクリックして、ペーストしてチェックして置いてくださいね。
※HTMLガチャンとできていないとスタイルシートが期待通り適用されませんので・・

★タブは＿に置換してあるので戻す。
★文字コードはShift_JISです。
☆divに使用されているclass名はHTML5の要素に合わせてあります。
<div class="header"></div> → <header></header>
<div class="section"></div> → <section></section>
以下同様　<nav></nav><aside></aside><footer></footer>となります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">

＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<p>このページでは・・・・</p>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>本文はsection</p>
＿＿<div class="section">
＿＿＿<h3>項見出し</h3>
＿＿＿<p>本文項記事</p>
＿＿＿<p>sectionの階層でレベルが判断される</p>
＿＿</div>
＿＿<div class="nav">
＿＿＿<h3>目次</h3>
＿＿＿<ol>
＿＿＿＿<li>１項</li>
＿＿＿＿<li>２項</li>
＿＿＿＿<li>３項</li>
＿＿＿</ol>
＿＿</div>
＿＿<div class="aside">
＿＿＿<h3>補足記事</h3>
＿＿＿<p>ここには、本題から外れた(aside)、本題とは直接関係しない記事なので最後に書く</p>
＿＿</div>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2013-03-03</dd>
＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt>
＿＿＿<dd>2013-03-03 12:00:00 (JST)</dd>
＿＿</dl>
＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ORUKAさん。丁寧な説明大変有難うございました。また、勉強にもなりました。じっくりと理解して今後の役にたてていきたいと思います。

通報する

お礼日時：2015/08/20 22:30

No.2ベストアンサー

回答者： Ogre7077
回答日時：2015/08/20 18:11

画像を背景に文字列を表示

<p style="height:240px; background:url(xxx.jpg); background-size:100% 100%; text-align:center; color:white; font-size:150%; padding:1em;">
文字列 <br> <small>最終更新日: yyyy-mm-dd</small> <br>
</p>

- 0
- 件

通報する

No.1

回答者： fnfnnis3
回答日時：2015/08/20 16:04

全体をどう表示したいのかわからないので、

答えようがありませんが
<p align="center"> だけ
あるいは<center>文字列</center>
では何でいけないのですか？
font指定とかは別の問題ですから、指定したければすればよい。
あと、img src="●●●.jpg" はここでは関係ないですよね?
あるいはこの周りに文字列を配置したいとか？