CSSにてheight、weightを指定したDIVタグの中にテキストを記述し、縦位置の中央揃えを行いたいのですが、方法がわかりません。
"vertical-align:middle;"などを指定しましたが、適用されませんでした。
スタイルに関することは全てCSSで行いたいので、TABLEタグなどでvalignを指定する方法は取りたくありません。
何かいい方法をご存知の方がいらっしゃいましたら、ご回答をよろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

<div>要素に、IDかclass属性を、持たせ、text-align:center;を記述する。



box1 {width:200px;height:150px;text-aligen:center;border:solid 1px #999;}
    • good
    • 1

width と height が指定されているのならば簡単です。


padding,marginの指定がDIVにされていないならば、ブラウザでくずれる心配もまずありません。標準モードにしておくほうが無難だと思いますが。。。


方法は、
position:relative; top:50%;
を指定した後で
margin-top: -(heightの半分のピクセル);
マイナス指定して、半分もどしてあげます。
しかし、中にいれるテキストの長さ、大きさが動的に変わるとなると少しややこしくなります。

ちなみに、vertival-align指定はテーブルにのみ適応されます。
つまり、外枠にひとつテーブルをつくり、そのtdにvertical-align指定をすれば一番すっきり解決されます。テーブルそのものを使いたくない場合は、手間ひまかけるしかありません。
    • good
    • 0

強引な方法なのかもしれませんが、position:relative;で真ん中あたりに配置できます。


この場合の移動距離は親要素の高さに依存しますから、標準的なブラウザであれば問題ないと思います。

<div style="border:red 2px solid;width:200px;height:200px;">
<span style="position:relative;top:50%;left:0px;">test</span>
</div>
    • good
    • 0

line-heightを使った方法があります。



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>テスト</title>
</head>
<body>
<div style="border:#000000 1px dotted;width:256px;height:256px;text-align:center;line-height:256px;">これはテストです。</div>
</body>
</html>

heightを%で指定したければ、padding:50% 0% 50% 0%;という方法もあります。

が、いずれも完璧ではありません。ちょっとしたことでレイアウトが崩れてしまいます。使用の際はご注意を…。
    • good
    • 0

cssの解釈の問題の様なのですが、残念ながら


IEにはそのような設定方法がなさそうです。
たとえばFFなどだとdisplay:table-cellを指定
するとvertical-alignを有効にできます。

テーブルが嫌なら素直にあきらめてください

<style>
div.x{
width:300;
height:200;
background-color:blue;
display:table-cell;
vertical-align: middle;
}
</style>
<body>
<div class="x">
test<br>
test<br>
test<br>
</div>
</body>
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QinputタグのテキストBOXだけ右寄せにする方法

inputタグのボタンやテキストBOXが混在しているページがあります。
この中のテキストBOXだけ右寄せにしたいと思っています。

原始的なJavaSctiptは使わずに、かつID指定・class指定なしに。
シンプルにきれいに、が希望です。1つ1つ指定というのはしたくないです。

昔はJavaScriptでinputタグのものを全部持ってきて
全ループさせながらtypeを判定しテキストBOXのものだけを
どうこうするとか書きましたが、原始的なので書きたくありません。
というかもう少しスマートな書き方はないものかと思い
質問をすることにしました。


スタイルシートだけで書ければいいなと思いますがこれを知りません。
input:text {…}
みたいな書き方があればいいなと思っています。

これがダメな場合でもprototypeやjquery等のライブラリを使用し
シンプルなJavaScriptの記述で実現できればそれを知りたいです。


・原始的なJavaScriptは使わない
・id・class指定のスタイルシートは使わない
・スタイルシートだけでテキストBOXだけを右寄せにする方法
・JavaScriptライブラリを使用してテキストBOXだけを右寄せにする方法
・スタイルシート単独もJavaScriptライブラリを使用しても出来ない場合は
 「出来ない」との明言を

こんな感じでお願いします。
よろしくお願いします。

inputタグのボタンやテキストBOXが混在しているページがあります。
この中のテキストBOXだけ右寄せにしたいと思っています。

原始的なJavaSctiptは使わずに、かつID指定・class指定なしに。
シンプルにきれいに、が希望です。1つ1つ指定というのはしたくないです。

昔はJavaScriptでinputタグのものを全部持ってきて
全ループさせながらtypeを判定しテキストBOXのものだけを
どうこうするとか書きましたが、原始的なので書きたくありません。
というかもう少しスマートな書き方はないものかと思い
質...続きを読む

Aベストアンサー

はじめまして。
CSSだけで実現する方法としては属性セレクタ(Attribute selectors)と呼ばれる指定方法があります。ただしこれは、一般的なモダンブラウザでは対応しているはずですがIE6以下では反応しません。

書き方としては、
[attribute=value]

inputの1行テキストボックスだけに適応させるには、
input[type="text"] { (ここにスタイル) }

という書き方ができます。
ご参考になれば幸いです。

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qtd要素内のdiv要素をセンタリングしたい

いつもお世話になっております。

HTMLのセンタリングで困っております。
どなたか教えていただけないでしょうか。

HTML
<table>
<tr>
<td>
<div><a href="#"></div>
</td>
</tr>
</table>

上記のdivをtd内でセンタリングさせたいです。

どうかよろしくお願いいたします。

Aベストアンサー

結果どうしたいのか不明ですが、
>div要素をセンタリング
aをセンターリングするのではなく、”div要素”をセンタリングですね?
その例だと、
<td style="padding: 0 100px;">
等で簡単で済みそうですが・・・
見た目同じでも、本来のセンターリングの意味にはならないので以下で。

まずは、貴方のHTMLは間違っています。
<div><a href="#"></div>
この↑divの中身は一体何でしょう? ここの質問だけの例だとしても適切に書きましょう。
<div><a href="#">例</a></div>

#1の方の回答では、divはセンターリングされません。
div内のインライン要素(文章など)はセンターリングになりますが
ブロック要素は、腐ったブラウザを除いてセンターリングされない・・・
divに罫線(枠のborder)を入れると理解できるでしょう。

箱を移動させる? 物を移動させる? この違いです。どちらかな?

#2の方のは、〆のHTMLが間違かな・・・

divはブロック要素なので、デフォルトでは幅が100%になります。
幅が100%なのだから、右も左もセンターもありません・・・

||大大大大大大| ← 幅が大きいと移動できない。
|   |小|    ← 幅が小さいと移動できる。
なので、
td内で、divのボックス自体が遊べるように、
tdの幅よりもdivの幅を小さくするのが第一条件です。
次に、
divの左右を margin:auto; にする。
例:
<td style="width:200px;">
<div style="width:100px; margin:auto; border:1px solid red;">
<a href="">例</a>
</div>
</td>

これで、中身のインライン要素が左(デフォルトなら)のままで、
divだけがセンターに配置されます。

外部CSSなら(数値は適当)
td{ width:200px;}
td div{ width:100px; margin:auto;}


因みに、上記ができなければ、
過去モードの可能性があるのでハックなどの別途対応が必要です・・・
<td style="width:200px; text-align:center;">
<div style="width:100px; margin:auto; text-align:left; border:1px solid red;">
<a href="">例</a>
</div>
</td>

あとは応用とか、「CSS センターリング」で検索するとか。

結果どうしたいのか不明ですが、
>div要素をセンタリング
aをセンターリングするのではなく、”div要素”をセンタリングですね?
その例だと、
<td style="padding: 0 100px;">
等で簡単で済みそうですが・・・
見た目同じでも、本来のセンターリングの意味にはならないので以下で。

まずは、貴方のHTMLは間違っています。
<div><a href="#"></div>
この↑divの中身は一体何でしょう? ここの質問だけの例だとしても適切に書きましょう。
<div><a href="#">例</a></div>

#1の方の回答では、divはセンターリングさ...続きを読む

Qframeset要素を使わずに画面を分割したい

アンテナ(下記サイト)のように左にメニュー画面を、右にコンテンツを表示するホームページを作成したいと考えています。
https://antenna.jp/

ひとつのウインドウで画面を2つにわけるためにはhtmlのframeset要素を使えばできることは把握しているのですが、上記サイトのアンテナではframesetを使わずに画面分割をしています。

見た目やレスポンシブ対応のしやすさも考え、できればframesetを使わずに画面分割を行いたいのですが、どのようにすれば可能でしょうか。
メニュー部分とコンテンツ部分を別々にスクロールできるようにしたいです。

どなたか分かる方教えてください。

Aベストアンサー

長くなるから、参考ページ参照。

参考URL:http://www.geocities.jp/eijispace/2012/0419.html

Qプルダウンメニュー表示時の高さの指定方法

ブラウザ上でプルダウンメニューを表示させる際に、表示される高さ(タテ幅)の指定をするにはどうすればよいか、ご存知の方は教えていただけないでしょうか?

ちなみに、プルダウンメニューの横幅は、<select>タグ内に、「style="width:(幅を指定);"」を記述することで固定幅の設定が可能でしたが・・・

なお、プルダウンメニューは初期表示として、1件のみ表示させるものとします(すなわち、<select>タグ内の「size="1"」の指定は変えないこととする)。

というのも、プルダウンに表示させる項目(条件によって可変)の件数が多い場合に、プルダウンメニュー内でスクロールさせるのをできるだけ避けたいためです。
よって、方法としては、
1.プルダウン表示させる際の高さ(タテ幅)を固定で指定する
2.可能であれば、登録されている全項目の表示をさせる
以上2つの方法を考えています。

なにかよい方法があれば、ぜひ教えてください。

Aベストアンサー

ご存知のように<select>タグの属性で縦幅を設定することはできませんね。

http://tohoho.wakusei.ne.jp/html/select.htm

スタイルでも設定はできないようですね。

異なるOSで同じブラウザで同じページの<select>タグ内を
表示しても縦幅が異なりますので
OSに依存されてしまうのでしょうか?
また、画面の解像度によるかもしれません。

Qで文字を右揃えにしたいのですが...(^-^;

こんばんは。私は今HPを作っています。
それで質問なんですけど、
HTMLで<SPAN>ってタグありますよね?
それにCSSを使って(? <SPAN>で囲まれた場所を
文字を右揃えに表示させたいのですが、何故かうまくいきません。
<SPAN style="text-align: right">○○</SPAN>
このようなタグで使いました(上)
何故なのでしょう、教えてください。
よろしくお願いします。

ちなみに、このようなものをつくりたいのです。(下)
リンク集なんですけど;

HPタイトル   管理者名
―――――――――――――――
バナー
―――――――――――――――
このHPの説明

これの管理者名のところを右揃えに表示したいのだが、
うまくいかないのです;<DIV>だと改行されてしまうし...

Aベストアンサー

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー">
<hr>
<p>このHPの説明</p>
</div>

こうすると、お望みどおりになるのではないかと思います。 なお、「<span style="float: right;">管理者名</span>」これは、回り込みさせるテキストの前、この場合はHPタイトルの前に入れてください。 HPタイトルの後ろに入れてしまうと、管理者名が一段下にずれて表示されると思います。

参考になれば幸いです。

span要素に対しては、text-alignの指定は有効にならないと思います。 こういった場合、positionプロパティを指定してポジショニングするか、floatプロパティで回り込みをさせるのが良いと思います。
CSSに頼らない方法をとっても良いなら、テーブルでレイアウトするのも手でしょう。

スタイルシートで処理する場合のソースの書き方ですが、以下のようにしてみてはいかがでしょうか。

<div>
<span style="float: right;">管理者名</span>HPタイトル
<hr style="clear: right;">
<img src="*" alt="バナー...続きを読む

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報