CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。

締切済

質問者：Java-Java
質問日時：2005/01/17 09:38
回答数：4件

CSS(スタイルシート)で画像の縦サイズに合わせて、中央揃えで文字を表示したい。

スタイルシートで、画像の縦サイズに合わせて中央揃えで文字を表示したいのですが、
どのように記述したら良いのかわかりません。

下記のようにテーブルを使えば簡単に出来るのですが、
これをスタイルシートのみで表現するにはどのように記述すればいいのでしょうか？
ちなみに左側画像の縦サイズは変わります。

よろしくお願いします。
-------------------------------------------------------------------
<html>
<head>
<title>CSS</title>

<style type="text/css">

</style>

</head>
<body>
<div id="waku">
<table width="435" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="80"><img src="hoge.gif" width="80" height="変わります"></td>
<td width="355" valign="middle">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</td>
</tr>
</table>
</div>
</body>
</html>
-------------------------------------------------------------------

通報する

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

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： noname#10370
回答日時：2005/01/17 22:14

強制的にしてみました。

何か違うような気もしますが・・・。

<html>
<head>
<title>CSS</title>

<style type="text/css">

</style>

</head>
<body>
<div id="waku">
<img src="hoge.gif" width="80" height="変わります">
<div id="table">
あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
</div>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答、ありがとうございます。

テンプレートとして使いたかったので、画像の高さは成りにしたかったのです。
ですので「top:変わりますの半分px;」というのはちょっと難しいです。
ですがheightを変数にしてやればうまくいかもしれません。
一度試してみます。

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

通報する

お礼日時：2005/01/18 12:16

No.3

回答者： BLUEPIXY
回答日時：2005/01/17 18:40

>文が長くなって改行になると画像の下へ潜るのでNG

#2のCSSでimgでinlineを使われていることから、
vertical-alignがinline要素を縦に（ベースラインに）中央揃えすることは、理解されていると思いますが、
inline要素が並んでいるものが、改行されるということは、「２行目になっている」ということです。
この２行目が１行目の下に潜るといって文句をいうのは、おかしいです。
つまり、テキスト部分をブロック扱いしていることになります。
テキスト部分をブロック扱いするなら、インラインの指定であるvertical-alignが無効になるのは当たり前です。
ＣＳＳでブロック要素を縦に中央揃えする方法は、なかったような気がしますので、元通りtableを使われるのがよろしいかと思います。
（ブロック要素を並べて、ブロック要素の上下にマージンをとる方法もあるかもしれませんが、高さが変わる場合なかなかうまくいかないと思います)

この回答への補足

>この２行目が１行目の下に潜るといって文句をいうのは、おかしいです。
>テキスト部分をブロック扱いするなら、インラインの指定であるvertical-alignが無効になるのは当たり前です。

そうですね。下記の2つは、質問する前からうまくいかないとわかっていました。
求めている答えはこれじゃない、とわかっていただくために例を書きました。

やはりテーブルを使うしかないのでしょうか？
CSSは難しいです。

補足日時：2005/01/17 19:05

通報する

- 0
- 件

通報する

No.2

回答者： mameusa
回答日時：2005/01/17 15:23

回り込みがダメなら、

IMG配置をfloat指定するしか思いつきませんが、
試してみましたか？

この場合だと
float:left；
ですかね。
段組できるはずです。

この回答への補足

floatを使うとこんなかんじでしょうか。
「vertical-align:middle;」が無視されてしまいます…。
「回り込ませて、真ん中揃え」って文法的にも矛盾しているような気がします。
-------------------------------------------------------------------
<html>
<head>
<title>CSS3</title>

<style type="text/css">

</style>

</head>
<body>
<div id="waku">
<img src="hoge.gif" width="80" height="変わります">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
<br class="clear">
</div>
</body>
</html>
-------------------------------------------------------------------

補足日時：2005/01/17 17:26

通報する

- 0
- 件

通報する

No.1

回答者： BLUEPIXY
回答日時：2005/01/17 11:28

#waku {

…
vertical-align:middle;
}

この回答への補足

もう少し詳細を書いていただけないでしょうか…。

もしかして下記のような事でしょうか。
imgへの「vertical-align:middle;」はすでに試しましたが、これだと文が長くなって改行になると画像の下へ潜るのでNGです。
-------------------------------------------------------------------
<html>
<head>
<title>CSS2</title>

<style type="text/css">

</style>

</head>
<body>
<div id="waku">
<img src="hoge.gif" width="80" height="変わります">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</div>
</div>
</body>
</html>
-------------------------------------------------------------------