教えて!goo限定 1000名様に電子コミック1000円分が当たる!!

table内で画像と文字をセンター合わせするには？

解決済

  • 質問者：yuyukina
  • 質問日時：
  • 回答数：3件

HTMLについて質問が御座います。

直接HTML内のtableに画像とテキストを配置した場合に、画像も文字も上下センター合わせにしたいのですが上手くいきません…。

例えば以下ですと…

<table>
<tr>
<td>
<img src="hoge"> ここにはテキスト
</td>
</tr>
</table>

とある場合に、それぞれをセンターで合わせる方法は可能でしょうか？

文字だけの場合、vertical-alignで出来るのですが文字が一緒にいると上手くいきません。
今回は背景での指定は行いたくないです。

お分かりになる方いらっしゃいましたらアドバイスよろしくお願いいたします。

通報する

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

質問の本文を隠す

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

「LINE bottom」に関するQ&A： The bottom line is they are in love. この構文は？

さらに表示

「alt テキスト」に関するQ&A： テキストにalt属性を持たせるには。

A 回答 (3件)

No.1ベストアンサー

  • 回答者： yambejp
  • 回答日時：

td{vartical-align:middle;}


td img{display: inline-block;vertical-align: middle;}
    • good
    • 3
    • 件
通報する
この回答へのお礼

端的なご回答ありがとうございます。
パーフェクトな回答感謝申し上げます。

td自体とtd内のimgへの指定でできるのですね、大変勉強になりました。
ありがとうございます。

通報する
お礼日時：2015/03/13 21:29

No.3

  • 回答者： ORUKA1951
  • 回答日時：

デザインのためにtableを使うのは誤りですけど・・・


それは置いておいて・・・
<table summary="テスト">
　<tbody>
　　<tr>
　　　<td>
　　　　<img src="hoge" width="33" height="100" alt="チューリップ"> ここにはテキスト
　　　</td>
　　　<td>
　　　　<img src="hoge" width="33" height="100" alt="チューリップ"> ここにはテキスト
　　　</td>
　　</tr>
　　<tr>
　　　<td>
　　　　<img src="hoge" width="33" height="100" alt="チューリップ"> ここにはテキスト
　　　</td>
　　　<td>
　　　　<img src="hoge" width="33" height="100" alt="チューリップ"> ここにはテキスト
　　　</td>
　　</tr>
　</tbody>
</table>
table[summary="テスト"] tbody tr td{height:300px;white-space:nowrap;}/* 行の折り返しを防ぐ*/
table[summary="テスト"] tbody tr td{vertical-align:top;}/* テキストの位置*/
table[summary="テスト"] tbody tr td+td img{vertical-align:middle;}/* 画像の位置 */
table[summary="テスト"] tbody tr+tr td{vertical-align:middle;}/* テキストの位置*/
table[summary="テスト"] tbody tr+tr td+td img{vertical-align:middle;}/* 画像の位置 */

とりうる値
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

本当に表ですか・・・
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： nitto3
  • 回答日時：

<body Valign=center align=center>


でページ全体がセンター配置になります。
<table Valign=center align=center>
でテーブルの中だけがセンター配置になります。
<tr Valign=center align=center>
で<tr>内がセンター配置になります。
<td Valign=center align=center>
で<td>内がセンター配置になります。
<img src="hoge" Valign=center align=center>
でこの画像だけがセンター配置になります。
    • good
    • 0
    • 件
通報する

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

「alt テキスト」に関するQ&A： 半角／全角キーで入力モードの切り替えができません

さらに表示

「LINE bottom」に関するQ&A： A4一枚にA6サイズを4枚分印刷する方法は？

「画像 文字」に関するQ&A： 画像文字認証の失敗

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

Q質問する（無料）

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

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

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

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

Q画像を縦横の真ん中に配置

HP作成初心者です。
この度、HPのトップページを作成していましてリンク付き画像を画面の
真ん中にもっていきたいのですが、下記タグでは、真ん中は真ん中なんですが
上部のマージンがゼロの状態になってしまいます。

●<div align="center">
<a href="LINK先URL">
<img src="中央に配置したい画像" width="300" height="400" alt="500"border=0>

上、下、右、左の中央にくるHTMLをどなたか教えてほしいです。

Aベストアンサー

tableを使うなら、透過画像を使う必要もありません。
<table height="100%" width="100%" border="1">
<tr><td align="center" valign="middle">
<img src="" alt=""></td></tr>
</table>
現状、cssのみでの縦方向中央はできないので、どうしてもやりたかったらtableを使わざるを得ないです。

他の回答も見る

Qtable内の画像を中央寄せ、のせると拡大、方法？

画像にマウスポインタをのせると画像が拡大される機能を備えた
画像の表を作りたいです。

テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。
CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。

あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。

各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。

下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。

アドバイスをお願いいたします。


～～～　HTML　～～～

<link rel="stylesheet"type="text/css" href="a.css">
<table border="1" width="500" cellpadding="5" bordercolor="#333333" />
<tr>
<th bgcolor="#FFA07A">あいう
<th bgcolor="#FFA07A">えおか
<th bgcolor="#FFA07A">きくけ
</tr>
<tr>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
</tr>
<tr>
<td align="left">ああああああああああああああああ</td>
<td align="left">いいいいいいいいいいいいいいい</td>
<td align="left">うううううううううううううううう</td>
</tr>
</table>
<br>
<br>
<table border="1" width="500" cellpadding="5" bordercolor="#333333" />
<tr>
<th bgcolor="#FFA07A">こさし
<th bgcolor="#FFA07A">すせそ
<th bgcolor="#FFA07A">なにぬ
</tr>
<tr>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
<td><a class="thumbnail" href="画像.jpg"><img src="画像.jpg" width="130" height="170" alt="" /></a></td>
</tr>
<tr>
<td align="left">ええええええええええええええええええええええ</td>
<td align="left">おおおおおおおおおおおおおおおおおおおお</td>
<td align="left">かかかかかかかかかかかかかかかかかか</td>
</tr>
</table>



～～～　CSS　～～～

a.thumbnail {
display: block;
float: left;
}
a.thumbnail img{
position: relative;
}
a.thumbnail,
a.thumbnail img{
width: 130px;
height: 170px;
margin: 0px 0px 0px 5px;
}
a.thumbnail:hover {
border: none;
cursor: default;
}
a.thumbnail:hover img {
width: auto;
height: auto;
}

画像にマウスポインタをのせると画像が拡大される機能を備えた
画像の表を作りたいです。

テーブルの各セルに入る画像の配置を縦横両方中央揃えにしたいです。
CSSのマージンで調整しましたが、セルによって微妙に配置がずれてしまいました。

あと、画像は拡大されるのですが、拡大されていない画像が前面に出てきてしまいます。

各セルの画像の縦横中央揃え、画像が正しく拡大される方法を教えて下さい。

下記は自分が入力したHTMLとCSSです。それをFirefoxで表示したものを添付しました。

アドバイスをお願...続きを読む

Aベストアンサー

せっかくXHTMLとCSSの組み合わせなのに、HTMLのタグのattrivutesがふんだんに使われている。すべてCSSに任せましょう。(tableや画像の属性は後方互換のため記述するが、詳細度は０なので上書き可能)
私は幅が固定されるtableは使いませんが、tableの場合の書き方で説明すると下記の様になるかな？
★画像はthumbnailを使わずブラウザ上でサイズ指定をしている。</p>
★classなどは必要最小限にしましょう。ひとつ書けば済む物を何度も書かない。
　シンプルが一番、後からのメンテナンスも考えましょう。
　サンプルの画像は240px×180pxを想定しています。一番右端の画像だけtableからはみ出さないように隣接セレクタを使って左に寄せている。
<table border="1" width="500" class="album">
<tbody>
<tr>
<th>あいう</th><th>えおか</th><th>きくけ</th>
</tr>
<tr class="thumbnail">
<td>
<a href="./img/sample1.jpg"><img src="./img/sample1.jpg" width="120" height="90" alt="" /></a>
</td>
<td>
<a href="./img/sample2.jpg"><img src="./img/sample2.jpg" width="120" height="90" alt="" /></a>
</td>
<td>
<a href="./img/sample3.jpg"><img src="./img/sample3.jpg" width="80" height="60" alt="" /></a>
</td>
</tr>
<tr>
<td>ああああああああああああああああ</td>
<td>いいいいいいいいいいいいいいい</td>
<td>うううううううううううううううう</td>
</tr>
</tbody>
</table>
</body>
</html>

<style type="text/css">
<!--
table.album{border-collapse:collapse;}
table.album th, table.album td{width:160px;border: #333333 2px solid;padding:5px;}
table.album th{background-color:#FFA07A;}
table.album tr.thumbnail td{text-align:center;text-indent:0em;}
table.album td{text-indent:1em;}
table.album tr.thumbnail td a{display:block;position:relative;}
table.album tr.thumbnail td a img{border:none;}
table.album tr.thumbnail td a:hover img{position:absolute;width:auto;
height:auto;top:-50px;left:0px;z-index:1;}
table.album tr.thumbnail td+td+td a:hover img{left:-80px;}
-->
</style>

せっかくXHTMLとCSSの組み合わせなのに、HTMLのタグのattrivutesがふんだんに使われている。すべてCSSに任せましょう。(tableや画像の属性は後方互換のため記述するが、詳細度は０なので上書き可能)
私は幅が固定されるtableは使いませんが、tableの場合の書き方で説明すると下記の様になるかな？
★画像はthumbnailを使わずブラウザ上でサイズ指定をしている。</p>
★classなどは必要最小限にしましょう。ひとつ書けば済む物を何度も書かない。
　シンプルが一番、後からのメンテナンスも考えましょう。
　サンプ...続きを読む

他の回答も見る

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか？

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver（ドリームウィーバー）2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver（ドリームウィーバー）2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px　右20px　下0　左30px　の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px　右右20px　の2方の隙間が開く。

他の回答も見る

Qテーブル内に画像を表示したい。

テーブル内に画像を1枚表示したいです。

下記のようにIMGタグを用いると、画像が表示されますが、
横幅が100％の時の大きさで枠が表示
されます。横に余白があります。

この余白を無くして、テーブルの枠線が画像をピッタリ
囲む様にしたいです。

どなたか、ご教授願います。初心者なので詳しくお願い
します。

----------------------------------------------

<table border=1>
　<tr>
　　　<td >
<img src='./test_size/image2.jpg' width='50%' >
　　　</td>
　</tr>
</table>

Aベストアンサー

画像のサイズが「幅50％」とありますが、
これは画像を半分の幅で表示したいと言うことでしょうか。
そういうことでないのでしたら、下記のようにセル幅(td width)を画像サイズに合わせれば大丈夫ですよ。

<table border=1>
　<tr>
　　　<td width="画像の幅(ピクセル数)">
<img src="../test_size/image2.jpg" width="画像の幅(ピクセル数)" height="画像の高さ(ピクセル数">
　　　</td>
　</tr>
</table>

補足ですが、画像を表示する際、imgタグには画像サイズも明記するとブラウザ側での読み込みが速くなります。

他の回答も見る

Qテーブルセル余白（例えば左側だけ、上側だけ、など）

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ５ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="ＸＸ"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

１つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

他の回答も見る

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）はこれら以外にも
いろいろな設定方法があります。

他の回答も見る

Qテーブルの横に画像を

テーブルのすぐ隣に画像を表示させるには、どうしたら良いでしょうか？

教えてください。

よろしくお願いします。

□…テーブル　★…画像

□★

こんな感じです。

Aベストアンサー

<img src="***.png" alt="**" style="float:right">
<table>
<tr><td>***</td></tr>
</table>

<table style="float:left">
<tr><td>***</td></tr>
</table>
<img src="***.png" alt="**">

こんな風にすると良いかも。

他の回答も見る

Qホームページで画像を横に並べるには？

ホームページ作成超初心者です。
初歩的な質問で恐縮です。

ホームページに画像を横に並べて（左→右）表示させたいと思っています。

<img src="画像ファイルのURL">
というHTMLで画像を表示できるところまでわかったのですが、続けて入れると画像が縦に並んでしまいます。

ド素人で申し訳ないですが、どなたか方法を教えて頂けませんか？
よろしくお願いいたします。

Aベストアンサー

<img src="画像ファイルのURL"><img src="画像ファイルのURL"><img src="画像ファイルのURL">・・・


とした場合、横に並びますよ
ただし、画像のサイズとブラウザサイズにもよりますが・・・

ブラウザサイズを無視して横に並べたいのであればTableを組んでしまうのも手です

<table>
<tr>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
</tr>
</table>

これで、横に並べれます


あと、アドバイス
<img src="画像ファイルのURL">　→　<img src="画像ファイルのURL" width="横寸法" height="縦寸法" alt="画像の名前">
のように、width、height、altは指定しましょう

他の回答も見る

Q画像を複数横に並べ、かつそれぞれの画像の下に文字を表示する

はじめまして！！質問のとおりです。

画像を横に複数表示しつつ、さらにそれぞれの画像の下に文字を表示（それそれの画像の横幅の範囲内に）するには、どうすればいいのでしょうか？？

回答よろしくお願いしますｍ（_ _）ｍ

Aベストアンサー

TABLEタグで横並びの1画像ずつ区切ってみてはいかがでしょう？
最小の画像横幅より狭くTD の幅指定をして画像の下に回り込みで
テキストを入れる形を取りborder=0に指定すれば罫線は表示されません。

http://www.geocities.co.jp/SiliconValley-Bay/7770/file/hf.html
http://www.tagindex.com/hp_guide/menu/02.html

他の回答も見る

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って　テーブルを作成しました。（これをテーブル(1)とします。）
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。（ここで作成したテーブル（表）をテーブル(2)とします。）
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか？
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE>　ここからテーブル(2)
<TBODY>
<TR>
<TD>　

他の回答も見る
ページトップページトップ

Q質問する（無料）

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

人気Q&Aランキング

おすすめ情報