画像上に文字を乗せるとき良い方法を教えてください

Question

<img src="./img/top.png" alt="topimg"> <span style="position: absolute; top: 80px; left: 300px;"> <font size="6" color="white">hogehogehogehoge </font> </span>

このように文字を細かく移動させて画像上にもってきていたのですが、ディスプレイのサイズによってかなりずれてしまいます。
どのデバイスでも文字がcenterにくるようにしたいのですが何か良い方法をどなたか教えていただけますでしょうか。

Answer 1

要素の上下左右のセンタリングってことですかね？であれば。
span { position:absolute; top:0; left:0; right:0; bottom:0; margin:auto;}

Answer 2

はじめまして。以下の形で試してみてください。

<!--#wrap start --> <div style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"> <!--#bg img start --> <img src="http://www.myfico.com/Images/sample_overlay.gif" style="position: absolute;top: 0;left: 0;width: 100%;"> <!--#bg img end --> <!--#text start --> <h2 style="position: relative;top: 50%;text-align: center;color: #333;font-size: 300%;"> hogehogehoge </h2> <!--#text end --> </div> <!--#wrap end -->

Answer 3

<div>タグで囲み,<div>タグにposition:relativeを設定するのでは、ダメですか? ```lang-html <div style="position:relative;"> <img src="./img/top.png" alt="topimg"> <span style="position: absolute; top: 80px; left: 300px;"> <font size="6" color="white">hogehogehogehoge </font> </span> </div> ```

Comments

[KazumaIshihara]

回答ありがとうございます！
<div style="position:relative;">をつかっても位置を数値で指定していたのでディスプレイのサイズによってずれてしまいます。

[orange0190]

画像サイズは可変なのですか?