こんにちは。現在、自分でHPを作成しています。以下の要素を、画面の垂直方向からも水平方向からも A B C の様に中央になるように表示したいのですが、そのやり方がわかりません。どなたか教えていただける方いらっしゃいましたら、どうぞよろしくお願い致します。要素↓ A B C PS:以下のページを参照してトライしてみましたが、何もページに何も反映されませんでした。(私の書き方が間違っていた可能性が高いです。) http://www.stylish-style.com/csstec/basic/p-vertical.html

要素の中央表示　CSS or HTML

解決済

質問者：darcy0910
質問日時：2009/03/17 18:55
回答数：5件

こんにちは。現在、自分でHPを作成しています。以下の要素を、画面の垂直方向からも水平方向からも

　　　　　　　　　　　　　　A 　B　 C

の様に中央になるように表示したいのですが、そのやり方がわかりません。どなたか教えていただける方いらっしゃいましたら、どうぞよろしくお願い致します。

要素↓

<A href="" style="text-decoration:none"><FONT size="4">A</FONT></A>

<A href="" style="text-decoration:none"><FONT size="4">B</FONT></A>

<A href="" style="text-decoration:none"><FONT size="4">C</FONT></A>

PS:以下のページを参照してトライしてみましたが、何もページに何も反映されませんでした。(私の書き方が間違っていた可能性が高いです。)

http://www.stylish-style.com/csstec/basic/p-vert …

通報する

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

質問の本文を隠す

回答 (5件)

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

No.1ベストアンサー

回答者： merry1123
回答日時：2009/03/17 21:19

<FONT style="position:absolute;top:45%;left:45%;" SIZE="4">

<A HREF="">aaa</A>　<A HREF="">bbb</A>　<A HREF="">ccc</A>
</FONT>

上記の記述はABCの要素（テキストの長さ）によるので、leftの%を少しずつ弄りながら確認するしかないかも・・・
画面がスクロールしても中央に固定したいのであれば、javascriptを使用しないと実現できないと思います。

- 0
- 件

通報する

この回答へのお礼

ありがとうございます！解決いたしました！

通報する

お礼日時：2009/04/01 05:11

No.5

回答者： hamue
回答日時：2009/03/18 13:37

横幅と高さは固定で大丈夫ですか？

それなら全体をdivで囲ってpositionプロパティとネガティブマージンを使用してみてはどうでしょか？

div#center-box {
width: 400px; //400px幅と仮定して
height: 400px; //同様
position: absolute;
top: 50%; //ボックス左上が水直方向真ん中にきます
left: 50% //水平方向・同上
margin-top: -200px //ボックス高さの半分上に戻す
margin-left: -200px //同上
}

- 0
- 件

通報する

No.4

回答者： rukuku
回答日時：2009/03/18 11:36

はじめまして

次のような形はいかがでしょうか？
枠を水平方向に中央揃えするのには
IE用に
text-align:center;
FireFox用に
margin:0 auto;
を使っています。（両方無いと片方でOKでも、もう片方でダメです。）

枠内でABCを垂直に配置するのには、枠と同じ高さの「ダミーの図」を作っておき、
vertical-align:middle;
で図とテキストを中央揃えしています。

<HTML>
<HEAD>
<META http-equiv="Content-Style-Type" content="text/css">
<STYLE type="text/css">
</STYLE>
<TITLE>Sample</TITLE>
</HEAD>
<BODY>
<DIV class="sample1">
<IMG class="dummy" src="">
<A href="">A</A>
<A href="">B</A>
<A href="">C</A>
</DIV>
</BODY>
</HTML>

- 0
- 件

通報する

No.3

回答者： Mee-me
回答日時：2009/03/18 11:01

こんな感じでしょうか？

<html>
<head><style type="text/css">
body{position:relative;}
a{text-decoration:none;font-size:middle;}
div{text-align:center;margin:-1em auto 0;position:absolute;top:50%;left:50%;}
</style></head>
<body>
<div>
<a href="" >a</a>
<a href="" >b</a>
<a href="" >c</a>
</div>
</body>
</html>

- 0
- 件

通報する

No.2

回答者： noname#83877
回答日時：2009/03/18 08:17

<html>

<head>
<style type="text/css">
* {margin:0; padding:0;}
html,body,.Content{height:100% !important; height:auto;}
body {display:table; text-align:center; margin:auto;}
.Content {display:table-cell !important; display:inline; vertical-align:middle; zoom:1;}
#SPACER {height:100%; width:0; vertical-align:middle;}
</style>
</head>
<body><div class="Content">あああああ</div><div class="Content">いいいいい<br>ううううう</div><div class="Content">えええええ<br>えええええ<br>おおおおお</div>
</body>
</html>

ちょっと最後のspanが微妙ですが、こういう感じにすると内容にかかわらず対応できます。