- ベストアンサー
要素の中央表示 CSS or HTML
こんにちは。現在、自分で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-vertical.html
- darcy0910
- お礼率10% (1/10)
- HTML
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
<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を使用しないと実現できないと思います。
その他の回答 (4)
- hamue
- ベストアンサー率33% (2/6)
横幅と高さは固定で大丈夫ですか？ それなら全体をdivで囲ってpositionプロパティとネガティブマージンを使用してみてはどうでしょか？ div#center-box { width: 400px; //400px幅と仮定して height: 400px; //同様 position: absolute; top: 50%; //ボックス左上が水直方向真ん中にきます left: 50% //水平方向・同上 margin-top: -200px //ボックス高さの半分上に戻す margin-left: -200px //同上 }
- rukuku
- ベストアンサー率42% (401/933)
はじめまして 次のような形はいかがでしょうか？ 枠を水平方向に中央揃えするのには 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"><!-- BODY{ text-align:center; } .dummy{ height:100%; width:0px; vertical-align:middle; } .sample1{ border:1px solid #000000; margin:0 auto; height:400px; width:400px; } A{ text-decoration:none; } --> </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>
- Mee-me
- ベストアンサー率27% (5/18)
こんな感じでしょうか？ <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>
<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><!-- --><!--[if lte IE 7]><span id="SPACER"></span><![endif]--> </body> </html> ちょっと最後のspanが微妙ですが、こういう感じにすると内容にかかわらず対応できます。
関連するQ&A
- CSS、おかしいですか？
CSSですが、本を見てやっています。 下記のように記述したのですが、書かなくてもよい記述とか、おかしいところ、ありますでしょうか？ <style type=text/css> body{font-size:10pt} td {font-size:10pt; line-height:12pt} tr {font-size:10pt line-height:12pt} dive {font-size:10pt;line-height:12pt} a:link {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:visited {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#990000} a:active {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} a:hover {font-size:10pt; font-weight:normal; font-style:normal; text-decoration:underline; text-align:left; vertical-align:; color:#ff0099} </style>
- 締切済み
- CSS
- HTML リンク フォントサイズを小さくする
タイトル通りテキストリンクのフォントサイズの変え方を教えて下さい <A href="http://www.yahoo.co.jp/" STYLE="text-decoration:none;" font size="1"> Powered by YahooJAPAN </A> でやってみましたがフォントサイズが変わりませんでした
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSで表示が異なってしまう
下記のようなCSSを使っているのですが、リンクが入ると表示が異なってしまいます。 画像の下のようにしたいのですが、どうすればよろしいでしょうか？ よろしくお願いします。 ■ CSS A:link{ color:#0095ff; text-decoration: none;} A:visited{ color:#0095ff; text-decoration: none;} A:hover{ color:#00efff; text-decoration: underline;} A:active{ color:#00efff; text-decoration: underline;} .style02{ padding:3px 0 0 6px; margin-bottom: 5px; font-size:16px; font-weight:bold; background-image:url(../_images/h_02.gif); background-repeat:repeat-x; border: 1px solid #000000; color: #000000; } ■ ソース <a class="style02" href="http://www.hogehoge.com">トップページ</a> <div class="style02">トップページ</div>
- ベストアンサー
- HTML
- CSSの記述
HTMLで普通のテキストのサイズを固定したいのですが、 うまくいきません。 何が間違っているのでしょうか。 一部のHTMLだけ、リンクの下線をはずしたいので、 HTMLに <LINK REL="stylesheet" HREF="css/style_win.css" TYPE="text/css"> <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 10pt;} --> </STYLE> と記述。 こちらの方は大丈夫です。 だめなのは外部 css/style_win.css に body { font-size:10pt } と書いたほうがまったく制御していません。 初心者で、本もたくさん調べましたが わかりません。 どうかお願いいたします。
- ベストアンサー
- HTML
- CSSの文字指定
<style type="text/css"> <!--A:link {color:#000055; text-decoration:none; } A:visited {color:#000055; text-decoration:none; } A:hover {color:#ff3300; text-decoration:underline; }--></style> 上部はcssのリンクですが、これに加えて文字のサイズ指定とフォントのフェイス指定もしたいです。 たとえば、MSゴシック,平成角ゴシックなど。 どう加えればよいですか？ <style type="text/css"> font:16px "ＭＳ Ｐゴシック",平成角ゴシック,</style>とやってもダメでした と
- ベストアンサー
- HTML
- cssにおけるフォントの大きさの制御と外部ファイルについて
現在多くの方々に見ていただけるようなホームページをと思って自分のページを制作しているのですが、フォントの大きさのことで困っています。 通常のIEではデフォルトでフォントを表示すると非常に大きな文字になるので-1のフォントを使用しています。しかしNNだと（特にお年寄りには）見づらいページになってしまうような感があります。 そこでスタイルシートでIEでもNNでもMacでもWinでも10ptの文字にして、文字にふれたときに下線がつくなどの処理をしました。 <style type="text/css"> <!-- a:link {font-size: 10pt; text-decoration:none; color:#000000; } a:visited {font-size: 10pt; text-decoration:none; color:#000000; } a:active {font-size: 10pt; text-decoration:none; color:#000000; } a:hover {font-size: 10pt; text-decoration:none; color:#FF0000; } --> </style> しかし、全く見られないなど（おそらくブラウザのバージョンにも依存するのだと思いますが）の意見もあり、困っています。 個人的には一番いい形で見てほしいし、多くの人にも見てもらいたいのでどうすればいいだろうと悩んでいます。 そこでご存じの方に教えていただきたいのですが （1）あまり負担にならない程度にそれぞれのマシンごとの識別させたい、もしくは、対応できないブラウザの場合は、通常のデフォルトサイズのフォントで見てもらうようにする方法はないでしょうか？ （2）cssやjavascriptなどは外部ファイルとしてhtmlファイルからリンクさせることが可能かと思いますが、実際の場合、htmlに埋め込む場合とリンクする場合で何か変わってくることはあるのでしょうか？（ひょっとして、複数のファイルにスタイルやスクリプトを適応させることができるというぐらいのメリットなのでしょうか？） お手数おかけしますがよろしくお願いいたします。
- ベストアンサー
- HTML
- 外部CSSがうまく表示されません
下記ファイル(index.html・sld01.html・sld02.html） について相互にリンクし、外部CSSで制御したいのですが、うまくできません。 1.index.html→sld01.html（CSS反映せずdefault表示）さらにsld02.htmlへはリンク切れとなる。 2.sld01.html→sld02.htmlの場合、sld01.htmlでの文字色が a:visitedになりsld02.htmlジャンプでCSS反映せずdefault表示となりindex.htmlへはリンク切れとなります。 どなたかご教授いただけませんでしょうか？ index.html <html> <head>省略 <link href="/styles-site.css/navi.css" rel="stylesheet" type="text/css"> <link href="/styles-site.css/waku.css" rel="stylesheet" type="text/css"> </head> <body> <table>省略 <div> <a href="index.html">top</a> </div> <div> <a href="../sldset/sld01.html">gallery</a> </div> </table> </body> </html> sld01.html・sld02.html(slid.01へ) <html> <head>省略 <title>gallery</title> <link href="/css/base.css" rel="stylesheet" type="text/css"> </head> <body> <TABLE> <TBODY> <TABLE> <TBODY> 省略（java) <font size="-1"> <a href="/contents/sldset/sld02.html">slid.02へ</a></font> </TBODY> </TABLE> <font size="-1"> <a href="/contents/index/index.html">元のページに戻る</a></font> </TBODY> </TABLE> </body> </html> base.css(一部省略） a:link { color: #FFCC33; text-decoration: none; } a:visited { color: #CCCCCC; text-decoration: none; } a:hover { color: #66CCFF; text-decoration: none; } a:active { color: #FF3366; text-decoration: none; }
- ベストアンサー
- その他（プログラミング・開発）
- 外部CSSの読み込みがうまくできない
<head>～ <link href="basic.css" rel="stylesheet" type="text/css"> ～</head> ↓basic.css body{font-size:80%;color:#4a4a4a;} a:link{color:#004a95;text-decoration:none;} a:visited{color:#950095;text-decoration:none;} a:hover{color:#ff80c0;text-decoration:none;} という感じで外部CSSを読み込んでいるのですが、 ブラウザのoperaやfirefoxだとbody{font-size:80%;color:#4a4a4a;}の所だけ反映されません。 IEだとその部分も反映されます。 cssファイルに修正箇所があるのでしょうか？ それとも外部cssを読み込むhtmlファイルの方に追加して記述しなければいけないタグがあるのでしょうか？
- ベストアンサー
- CSS
- 外部ＣＳＳをかくには。
ＨＰのページひとつひとつにいちいちスタイルシートをかいていくのが 面倒になったので外部ＣＳＳでまとめてしまおうと 思ったのですが、上手くいきません。 ちなみにこうかいております↓ <STYLE TYPE="text/css"> <!-- BODY { letter-spacing:7px; line-height:15pt; } --> </STYLE> <style type="text/css"> <!-- body { scrollbar-face-color: #FF9900; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #ff9900; scrollbar-darkshadow-color: #ffffff; } --> </STYLE> <STYLE TYPE="text/css"><!--A{text-decoration:none;}A:hover{text-decoration:underline overline;}--></STYLE> <style type=text/css><!--a{text-decoration:none;}--></style> <style><!--BODY{font-size:8pt;}--></STYLE> どこか悪い点がありましたら教えてください。
- ベストアンサー
- HTML
- <p>要素をインライン要素にしての右寄せ
<p>要素をインライン要素にしての右寄せ 【以下、HTML】 .text{ font-size:12px; font-weight:normal; margin:0px; padding:25px 0px 0px 35px; } <div class="text"> <img src="-" style="vertical-align:-2px;margin:0px 10px 10px 15px;"><a href="-">リンク</a><p style="text-align: right;display:inline;">あいうえお</p><br></div> 上記の「あいうえお」の部分を画像やリンクと並列したく、インライン要素で右寄せしたいんですがどうしたらいいでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございます！解決いたしました！