画像の縦位置について

質問

最近、テンプレートなどを使ってHPの作成に
取り組み始めた初心者です。

画像の縦の位置を調整したいのですが、
うまく行きません。

「～middle」を使うのかなと思っていろいろと試行錯誤、

例えば、
<p class="middle">
<img scr="～",～～～～,class="middle">

とかやってみましたが、駄目でした。
（皆目、見当違いなのかもしれませんが、…）

特に今まではテンプレートの画像設定で規定の画像が中央にあっても、
アフィリタグを入れると位置が乱れます。

お分かりの方はご教授頂けると幸いです。

どうぞ宜しくお願い致します。

回答No.2

noname#137826

<img border="アフィリタグ">

というのは何でしょう？

このimg要素にはsrc属性が指定されていません。
ですから、「画像が見つかりません」という旨のアイコンが表示されるのではありませんか？
本来のアイコンと、この「見つかりません」アイコンが2つ並んだ状態でセンタリングされると、本来のアイコンは中央より少し左側にずれることになります。

回答No.1

noname#137826

「画像の縦の位置を調整する」といっても、方法はいくつもあります。
どんな風にしたいのか、あるいは、何を試したら何が起こってどんな風に困ったのか、などもっと具体的にご質問されると、より適切な回答が得られる可能性があると思います。

「middleを使う」「アフィリタグを入れると位置が乱れる」と言われても、それだけでは何が起こっているのかわかりようがありません。
ですから、具体的な問題解決法の提供はできないことをご了承ください。

ここでは、すぐに思いつく(一般的と思われる)方法例をいくつか挙げておきます。
いずれも位置を調節したい画像に対してスタイルを適用します。

(1) positionを指定する
position: relative;
top: 100px;

(2) paddingあるいはmarginを指定する
padding-top: 100px;

(3) vertical-alignを指定する
vertical-align: middle;

全て「画像の縦の位置を調節」しているものの結果は全て異なります。
具体的な質問の方が適切な回答が得られる可能性がある理由です。

補足

ご指摘ありがとうございます。

また不十分な情報の中でもアドバイス頂き、ありがとうございます。

知識不足ゆえ、表現自体がわかりずらい部分もあるかと思いますが、
宜しくお願い致します。

今回の件で申し上げると、テーブルの中でのアイコンの位置が
アフィリタグを入れるまでは、スペースの中央に位置されていますが、
例えば、「詳細」というアイコンにアフィリタグをリンクさせると、
左右の位置左によって見栄えが悪くなります。

<tr>
<td align="center">
<img src="アイコンの詳細" />
</td>
</tr>

これだとアイコンはセンターに位置します。

<tr>
<td align="center">
<a href="アフィリタグ">
<img src="アイコンの詳細" /></a>
<img border="アフィリタグ″>
</td>
</tr>

上記のようにアフィリタグではさんでアイコンをリンク付けると、
画像がよってしまいます。

CSSのテーブルの設定にもよると思いますので、少し長いですが、
下記にコピーさせてもらいます。

伝わりにくいかもしれませんが、宜しくお願い致します。

#table-01{
border-collapse:collapse;

}

#table-01 th{
text-align: center;
padding:0px 0px 4px 0px;
}

#table-01 tr{
}

#table-01 img{
border:0px ;
}

#table-01 td{

background-color: #F9F9F7;
font-size: 14px;
text-align: center;
border: solid 1px #757575;
padding: 2px;

}

#table-01 .tdleft{

text-align: left;

}

table#table-01 a:hover{
color:red;
text-decoration: underline;