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と関連する良く見られている質問

Qブラジル語とポルトガル語のアクセントの位置の違い

(1)ブラジル語とポルトガル語ではアクセントの位置が変わってくると聞きました。どういったパターンが顕著な例ですか?よろしければご教示ください。

(2)
novo 新しい
nova 知らせ、便り

第一音節は前者が closed o で、後者が open o で、ともにアクセントは第一音節にあります。どうしてこのような差があるの?また、ポルトガル語で他のこのような例を紹介してください。

Aベストアンサー

お久しぶりです。
専門的な説明な出来かねますが、ポルトガルとブラジルとまで行かなくてもブラジル国内だけでも地域によってアクセントが違うことは良くあります、地方による訛りですが。
ブラジルのポルトガル語そのものが本家ポルトガルの位置地方の訛りの要素が有ります。
私個人の話で恐縮ですが、ブラジルでは比較的標準語に近い発音をする地域に住んでましたが、それでもポルトガル人からは「南米訛りだね」と指摘されます。

因みに、novo と nova は男性名詞と女性名詞の違いです。双方とも新しいという意味で違いは有りません。
但し、nova はご指摘の様に「知らせ」という意味で使われます。 boas novas(良い知らせ)、複数形で使用されます、単数形では使用されている例は記憶に有りません。
no の o には( ^ ) acento circunflexo が付いてましたが、1960年代の改定で女性名詞からは削除されました。ポルトガル語のサイトを見ると男性名詞からも消えてます。複数のサイトをチェックしましたが何処も同じなので単なるミススペルではなさそうです。1960年代以降、改定が再度あったかどうかは不明です。
因みに(^)は日本語の「ッ」と同じ意味なのですが発音は ノーヴォ、ノーヴァです。
更に、
vovo(^) ヴォヴォッ(お爺さん)
vovo(') ヴォヴォー(お婆さん)

このルールで行くとno(^)vo はノーヴォでなく、ノッヴォと成るはずですが...卵も o(^)vo オーヴォであってオッヴォでは有りません。
解答にはなってませんけど参考になれば幸いです。

お久しぶりです。
専門的な説明な出来かねますが、ポルトガルとブラジルとまで行かなくてもブラジル国内だけでも地域によってアクセントが違うことは良くあります、地方による訛りですが。
ブラジルのポルトガル語そのものが本家ポルトガルの位置地方の訛りの要素が有ります。
私個人の話で恐縮ですが、ブラジルでは比較的標準語に近い発音をする地域に住んでましたが、それでもポルトガル人からは「南米訛りだね」と指摘されます。

因みに、novo と nova は男性名詞と女性名詞の違いです。双方とも新しいと...続きを読む

QCSSでdivの縦幅を指定する方法

CSSで、div領域の縦幅を指定する方法を教えてください。

下記のような感じのHTMLで、Aが外枠、中のBとCがfloatを使って横並びになっています。
B、C共に、縦のサイズをAの縦幅いっぱいまで(内容の高さに拘わらず常に)広げる方法がわかりません。
(ブログのテンプレート用なので、内容は一定ではありません)
height:100%としてみましたが無理でした。

<div id="A">
  <div id="B">
    メニュー
  </div>
  <div id="C">
    本文
  </div>
</div>

よろしくお願いいたします。

Aベストアンサー

xhtml なら,親要素のサイズも指定しないとだめです.
つまり,この場合は, html, body のサイズも指定しましょう.

Qブラジルは何で強い?。しかし、リーグは何故小規模?。

 ブラジルサッカーにいくつかの疑問があります。
 まず、ブラジルは南米に位置していると思うんですが、近隣国に比べてブラジルだけ実力が抜きに出てませんか?。

 そして、その割にはブラジル国内リーグは何故、小規模なんでしょう?。
 
 

Aベストアンサー

南米の周りの国が弱いんですか?

サビオラ、リケルメ、アイマール、クレスポ、クラウディオロペス、べロン、などなど世界中に超一流選手がそろってるアルゼンチンと言う国をご存知じゃないのですか??それって、ただ、ワールドカップの結果を見て、ベスト16にあがった南米の国はパラグアイとブラジルだけしかないからと言う素人の考えから言ってませんか?
南米はサッカーの大陸です。今となっては、日本人選手がヨーロッパで活躍してますが、昔を考えれば…南米出身の選手はヨーロッパで各クラブのエースとして活躍してます。

なぜ、ブラジルの国内リーグが代表チームと違い小規模かって単純です。サッカーには選手供給国と選手を使う国があるんです。
例えば、世界ランキング、トップ10位を言うと、ブラジル、フランス、スペイン、アルゼンチン、メキシコ、イングランド、オランダ、トルコ、チェコ、ドイツなんです。この中で国内リーグが盛んなのは、スペインとイングランドくらいです。他の国は、どこも良い若手選手を国内リーグで育成し、育ったら、選手を海外へ送り出しているんです。日本も完全に今は選手輸出国です。中田、中村、小野、稲本、藤田、広山、高原などなどヨーロッパで輝く選手を放出してるんで。

南米の周りの国が弱いんですか?

サビオラ、リケルメ、アイマール、クレスポ、クラウディオロペス、べロン、などなど世界中に超一流選手がそろってるアルゼンチンと言う国をご存知じゃないのですか??それって、ただ、ワールドカップの結果を見て、ベスト16にあがった南米の国はパラグアイとブラジルだけしかないからと言う素人の考えから言ってませんか?
南米はサッカーの大陸です。今となっては、日本人選手がヨーロッパで活躍してますが、昔を考えれば…南米出身の選手はヨーロッパで各クラブのエースとし...続きを読む

Qdreamweaverで、tdにheightを指定したのをcssのheightに置き換える方法

検索および置換で、td height="200"
などと指定しているのを
td style="height:200px" に一発変換する方法ございますでしょうか。
DW8です。

Aベストアンサー

#1です。

置換では正規表現が使えますが、わたしは詳しくないのでお答えすることができません。すみません。

ですが、どういうことができるかというと、

<td height="R"> → <td style="height:Rpx">

に一括置換できます。

※私なら面倒かもしれないけど
1.<td height="200">の置換
2.<td height="100">の置換
3.<td height="の検索で残っているところがないか探す
という手順をふみます。

Q今のブラジル代表は弱いんですか?

FIFAランキングもすごく低い位置にいますが、今のブラジルってそんなに弱いんでしょうか?

自国開催のW杯…大丈夫ですかね。

何だかんだで帳尻合わせてくるから心配ない!のか、何とかしないとマジでヤバイ!のか。

サッカーにお詳しい方は、ブラジル代表をどう見てらっしゃいますか?

Aベストアンサー

FIFAランキングは公式戦と親善試合でいえば、
公式戦の方がポイントが高いです。
ところがブラジルは次回ワールドカップではホスト国になり
予選(公式戦)が免除されています。
従って公式戦の少ないブラジルは必然的に順位を落としているそうです。
ただFIFAランキングは間近4年から算出するらしいですが、
間近(最近の試合データ)なものがポイントが高く、古くなるにつれ
ポイントは低くなるそうです。
その試合の格式にもポイントが関係あるそうです。
なので、親善試合で稼いでもワールドカップ予選を戦っている国々に
比べるとランキング的には落ちるようですが、それがすべててはなく、
ブラジルはブラジルでワールドカップに標準を定めているようです。
余談ですが、ここ10数年ワールドカップベスト4にも入れないイングランドが
ランキング的に高いようですよ(去年のデータで3位だった)、
欧州の大会やワールドカップ予選でがんばっているのではないでしょうか。

なんにしろよかったらブラジルの低い理由を検索してみてください。

Qdivのheight指定で画面一杯に表示したい

よろしくお願い致します。

<div>の<height>を100%に指定して、
タブレット等での表示時、縦でも横でも画面一杯に
表示させたいと考えています。

とりあえず css で以下は宣言済みです。
 html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
 }

親子構造としては以下を想定しています(いくらか簡略化しています)
<html>
 <body>
  <div id="H" style="height:60px;">
   (1)ここにヘッダー的なもの
  </div>
  <div id="B" style="height:100%; overflow: auto;">
   (2)この部分を縦一杯にしたい
  </div>
 </body>
</html>

(2)の部分にはjavascriptでサーバから取得した
XMLのデータを埋め込んでおります。

その際、選択行の色付け等を行いたかった為、
大枠を<div>でくくり、その中に<table>で表組みしています。
最終的な構造は以下のようになっているはずです。
 <div id="B" style="height:100%; overflow: auto;">
  <div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div>
  <div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div>
  <div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div>
  ・・・
 </div>

行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。
また、1行あたりの高さは<td style="height: 40px;">と指定しています。
(rowspanを使ってのぶち抜きを行っているため)

html と body に height:100%; を指定しているので、
予想ではヘッダー用のdivが指定の高さで表示され、
次のdivが残りの高さ分一杯に表示。
その中のデータは overflow:auto; でスクロールできる。

と考えていたのですが、実際はjavascriptで埋め込んだdiv、
及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。
(divのoverflowが全く機能しません)

100%ではなく 500px としてみたところ、
そのサイズに収まってスクロールできました。
(縦一杯ではありませんがdivのoverflowは機能しました)

何とか height 100% を実現して、
divのスクロールバーのみでの表示を行いたいのですが、
何か指定が足りないのでしょうか?

よろしくお願い致します。

<div>の<height>を100%に指定して、
タブレット等での表示時、縦でも横でも画面一杯に
表示させたいと考えています。

とりあえず css で以下は宣言済みです。
 html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
 }

親子構造としては以下を想定しています(いくらか簡略化しています)
<html>
 <body>
  <div id="H" style="height:60px;">
   (1)ここにヘッダー的なもの
  </div>
  <div id="B" style="height:100%; overflow: auto;">
   (2)この...続きを読む

Aベストアンサー

>html と body に height:100%; を指定しているので、
予想ではヘッダー用のdivが指定の高さで表示され、
次のdivが残りの高さ分一杯に表示。

まずこの予想の部分が間違っています。質問の通りに作って、高さ500pxの画面で確認した場合、html、bodyの高さは500px、ヘッダー60px、そしてその次のdivの高さも500pxで、60pxはみ出る形になります。height:100%というのは親セレクタに対しての100%です、残りの100%ではありません。

残りの高さいっぱいにしたい場合はcssのみではできません。JSを使うか、似たような見え方で違う組み方をするか…

Q日本とブラジルの時間差について

「日本は3月11日午前11時であったとき、ある国の首都は前日の午後11時であった。この国の首都は次のうちどれか?」
(オーストラリア、ブラジル、インド、インドネシア)
答えはブラジルだったのですが、それで正しいと思うのですが・・・解答の説明に「ブラジルは日本のちょうど反対に位置する、経度15度で1時間の時差が生じる。」とありましたが、この説明の意味がよくわからないのですが、日本とブラジルの時差は問題からしても12時間ではないのでしょうか?!
この解答の説明は間違っているのでしょうか?

Aベストアンサー

〔No.4より補足〕

 ブラジルは3つの時間帯をもっていて、「日本との時差は-12時間~-13時間」ということができそうです。そして首都ブラジリアに関しては、時差-12時間と説明されているところ、-13時間と説明されているところ、または夏時間を採用する年「も」ある、などとなっていて、すこしはっきりしません。失礼しました。もう少ししっかり調べてみます。

 そして設問は「日本が3月11日午前11時であったとき、ある都市は前日の午後11時であった。この都市を首都とする国は次のうちのどれか?」
(オーストラリア、ブラジル、インド、インドネシア)
 なのかもしれませんね。これなら意味がとおります。
 ブラジリアとの時差を-12時間とすれば、正解はブラジルということになります。

 経度と時差の関係については皆さんの回答のとおり、
 「1時間15度×12時間=180度(地球の反対側)」
ということでお分かりになると思います。

Qdivのheightを最大幅で指定するには

HTML
<div id="main">
<div id="sub">
</div>
</div>

CSS
div#main{
width="100"
height="100"
}
div#sub{
width=auto
height=???
}

mainのheightを変えても、subのheightが
それに追従するようにしたいのですが、
autoや100%でもうまく行きません。
どうすればいいのでしょうか?

Aベストアンサー

まず、cssで数値を指定するときは単位が必須です。パーセントなのかピクセルなのかポイントなのかetc…。

高さをパーセントで指定する場合は、親要素の高さに対してのパーセントになります。
だから親要素の高さが指定してないと意味がありません。

<html>
<body>
<div id="main">
<div id="sub">
</div>
</div>
</body>
</html>

この場合、subの親要素であるmainに高さの指定が必要ですが、mainの高さもパーセントだとすると、さらに上のbody要素にも高さを指定する必要があります。
さらにbody要素もパーセント指定の場合はhtml要素にも指定します。

html,
body,
div#main,
div#sub{
height:100%;
}

親要素の高さが固定されている場合は、そこまでいく必要はありません。

div#main{
height:500px;
}
div#sub{
height:100%;
}

Q日本発行の国際免許 ブラジルで使えますか???

私のダンナは日系ブラジル人です。
13年位前は、ブラジルは、国際なんとか免許なんとか??と提携していないので、書き換えは出来ませんでした。
ブラジルではE免許でしたが、ブラジルでも書き換えをしていないので、日本でいう失効だと思います。

日本の試験場で、学科免除で実地試験を受けて、日本の免許を取りましたたが・・

ブラジルに行く際、たちまち国際免許となるわけですが・・・・・
日本で発行した国際免許は、ブラジルで使えるのでしょうか???
聞くところによると、ブラジルでは失効した免許も申請すれば復活するらしいのですが・・・・・
これも、ほんとですか??

Aベストアンサー

日本の国際免許はブラジルでは使用できません。
ブラジルの免許失効については解りません。

参考URL:http://www.geocities.co.jp/SilkRoad/8739/information/license.html

QCSSでボックスの位置をずらすCSSなどはある?

HTMLないしはCSSでボックスの位置をずらすCSSなどはあるのでしょうか?

上に1cm動かすなどできないのでしょうか?

Aベストアンサー

HTMLがデザインを目的に作成されています。これは根本的に直しましょう。
『構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』は、HTML4.01の勧告(1999/12)以来繰り返し唱えられています。『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』
 現在勧告に向けて作業が進んでいるHTML5では、プレゼンテーションに関わる要素や属性が廃止されています。作成されるならHTML4.01strict,XHTML1.0strict,XHTML1.1で作成しましょう。

(注意)下記のソースは、タブを_に置換してあります。テストするときは戻すこと。

[HTML]
<h1 align="center">のalignはスタイルシートで設定しまょう。
<br/>はデザインのために使うものではありません。
<table bor・・・デザインのためにtableは使うべきではありません。
・・字下げはスタイルシートで設定します。
<address>は、著者への連絡先を記述するものです。
デザインのために余分な要素(br,div,table)を加えない。その必要はありません。加えると逆にデザインしにくくなります。

★以上を元にHTMLを書き直すと下記のようなシンプルなものになります。
 *サイトナビゲーションはこの文書の目次ではないのでfooterに入れました。

<div class="header">
_<h1>アレルギー性皮膚炎</h1>
_<p class="goTop"><a href="./top.html"><span>トップへ</span></p>
</div>
<div class="section">
_<h2>自己紹介</h2>
_<p>大学受験まではただの乾燥肌でした。</p>
_<p>大学受験中</p>
</div>
<div class="footer">
_<div class="nav">
__<ol>
___<li><a href="http://localhost:2080/test/aregy/top.html">TOPPAGEへ行く</a></li>
___<li><a href="http://localhost:2080/test/aregy/chiryou.html">注目の最新治療</a></li>
___<li><a href="http://localhost:2080/test/aregy/tokusyu.html">特殊治療・体験治療</a></li>
___<li><a href="#DocumentVirsion">文書情報</a></li>
__</ol>
_</div>
_<div id="DocumentVirsion">
__<dl>
___<dt>First Published</dt>
___<dd>2011-12-21</dd>
__</dl>
_</div>
_<p class="copyright">
__<span class="copy">Copyright©</span><span class="text">アレルギー性皮膚炎特殊治療最新治療体験記AND特殊治療最新治療紹介</span><span class="en">All Rights Reserved.</span>
_</p>
</div>

だけでよいですね。この様にHTMLが書かれているとスタイルシートで、まったく自由にデザインできます。
『 CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input )』

 この様なHTMLだと、検索エンジンもスタイルシートや画像を読み込まないユーザーエージェントにも理解できます。それよりも、後で自分が書き直すときも楽ですし、スタイルシートも書きやすい。
 スタイルシートを変更するだけで、「サイトナビゲーションをウィンドウの一番上に置こう」「プルダウンメニューにしよう」とかもHTMLを書き直さずにできます。すなわちスタイルシートの「スタイルシートを書きなおすだけで、サイト内のすべてのページのデザインをまったく変えることが出来ます。だってデザインのために書かれてなくて、文書解析が出来るように書いてあるから・・・

[CSS]
background-color: mediumpurple;この色は色のキーワードしては使わないほうが良いです。キーワードとして基本的に使えるのは16色だけです。それ以外は#ないしrgb()で指定しましょう。
 色 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/types.html#h-6.5 )

★出所・出現順番・セレクタ・詳細度・優先度などカスケーディングを使いましょう。せっかくのカスケーディングスタイルシート、カスケーディングは最大の特長です。CSSを使いながらカスケーディングを無視した書き方はしないように。

html,body{margin:0;padding:0;}
h1,h2{text-align:center;}
div.header,div.section,div.footer{margin:0 20px 0 260px;}
div.header{height:158px;}
div.header h1{margin:0 240px 0 0;line-height:158px;}
div.header p.goTop{
_position:absolute;left:20px;top:0;
_height:158px;width:240px;margin:0;
_background:maroon url(../test/gazou/background/umi0182-077.jpg) no-repeat;
_text-align:center;line-height:158px;
}
div.header p.goTop a{
_display:block;
_width:100%;height:100%;
}
div.header p.goTop a span{visibility:hidden;}
div.section{
_border:medium solid black;
_background-color:#DDA0DD;
_min-height:400px;
}
div.section h2{
_background-color:#9370DB;
_margin:0;height:1em;
_padding:0.3em;
_border-bottom:medium solid black;
}
div.section p{
_margin:0 1em;
_text-indent:1em;/* 字下げはtext-indent */
_line-height:1.6em;/* 行間隔はline-heightで */
}
div.footer div.nav{
_position:fixed;top:160px;_left:20px;
_width:230px;
_font-size: 1.3em;
_background-image:url("../test/gazou/background/bg052.gif");
}
div.footer div.nav ol,
div.footer div.nav ol li{
_display:block;list-style:none;
_margin:0;padding:0;
}
div.footer div.nav ol li{margin:10px 0;}
p.copyright{font-size:0.9em;}
p.copyright span+span{margin-left:2em;}

HTMLがデザインを目的に作成されています。これは根本的に直しましょう。
『構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )』は、HTML4.01の勧告(1999/12)以来繰り返し唱えられています。『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』
 現在勧告に向けて作業が進んでいるHTML5では、プ...続きを読む


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

人気Q&Aランキング

おすすめ情報