画像を縦横の真ん中に配置

解決済

質問者：npsr
質問日時：2006/10/18 19:06
回答数：5件

HP作成初心者です。
この度、HPのトップページを作成していましてリンク付き画像を画面の
真ん中にもっていきたいのですが、下記タグでは、真ん中は真ん中なんですが
上部のマージンがゼロの状態になってしまいます。

●<div align="center">
<a href="LINK先URL">
<img src="中央に配置したい画像" width="300" height="400" alt="500"border=0>

上、下、右、左の中央にくるHTMLをどなたか教えてほしいです。

通報する

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

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： goldfox
回答日時：2006/10/18 23:11

tableを使うなら、透過画像を使う必要もありません。

<table height="100%" width="100%" border="1">
<tr><td align="center" valign="middle">
<img src="" alt=""></td></tr>
</table>
現状、cssのみでの縦方向中央はできないので、どうしてもやりたかったらtableを使わざるを得ないです。

- 1
- 件

通報する

この回答へのお礼

table、補足回答了解です。
こちらも試させて頂きます。

ありがとうございます

通報する

お礼日時：2006/10/19 19:45

No.5

回答者： 123isao
回答日時：2006/10/19 06:21

一番簡単なのは#4の方のようにテーブルでやる方法ですね。

CSSで中央表示するには次のようにします。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<style type="text/css">

</style>
</head>
<body>
<div id="center">
<a href="http://okwave.jp/"><img src="http://oshiete1.goo.ne.jp/images_goo/goo_h1_50b. … width="123" height="22" alt="" /></a></div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

少し初心者の私には難しいタグですが、勉強し理解できるようになりたいと
思います。

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

通報する

お礼日時：2006/10/19 19:48

No.3

回答者： noname#56851
回答日時：2006/10/18 22:47

tableとスペーサーを使う方法があります。

<html>
<body>
<table width="800" height="566" border="1">
<th>
<img src="spacer.gif" width="800" height="100" border="1">
<img src="topga.jpg" width="566" height="566" border="1">
<img src="spacer.gif" width="800" height="100" border="1">
</th>
</table>
</body>
</html>

spacer.gifは 1×1 のなのも書かれていない透明gifファイルです。
topgaはあり物の画像で試したのでwidth height の数字は適時変更をしてみてください。
その他の数字は中心の画像の大きさからの逆算で出てきた数字です。
borderも不必要なら削除してみて下さい。
もっとスマートな方法もあるかもしれませんが、これも一つの方法という事で。

- 1
- 件

通報する

この回答へのお礼

アドバイスありがとうございます。
透明gifで空白を埋めてしまうということですよね?

早速ためさせていただきます!

通報する

お礼日時：2006/10/19 19:44

No.2

回答者： gura_
回答日時：2006/10/18 21:50

　タグを機能をよく勉強して、工夫するしかないですね。

　例えばこんな感じでしょうか↓
<html>
<head></head>
<body>
<table border="0" align="center" height="100%">
<tr>
<td>
<a href="http://oshiete.goo.ne.jp/">
<img src="http://oshiete1.goo.ne.jp/images_goo/goo_h1_50b. … width="300" height="40" alt="中央に配置したい画像" border="0">
</a>
</td>
</tr>
</table>
</body>
</html>

参考URL：http://www.tohoho-web.com/how2/layout.htm#vcenter