最近、テンプレートなどを使ってHPの作成に
取り組み始めた初心者です。
画像の縦の位置を調整したいのですが、
うまく行きません。
「~middle」を使うのかなと思っていろいろと試行錯誤、
例えば、
<p class="middle">
<img scr="~",~~~~,class="middle">
とかやってみましたが、駄目でした。
(皆目、見当違いなのかもしれませんが、…)
特に今まではテンプレートの画像設定で規定の画像が中央にあっても、
アフィリタグを入れると位置が乱れます。
お分かりの方はご教授頂けると幸いです。
どうぞ宜しくお願い致します。
No.1ベストアンサー
- 回答日時:
「画像の縦の位置を調整する」といっても、方法はいくつもあります。
どんな風にしたいのか、あるいは、何を試したら何が起こってどんな風に困ったのか、などもっと具体的にご質問されると、より適切な回答が得られる可能性があると思います。
「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;
No.2
- 回答日時:
<img border="アフィリタグ">
というのは何でしょう?
このimg要素にはsrc属性が指定されていません。
ですから、「画像が見つかりません」という旨のアイコンが表示されるのではありませんか?
本来のアイコンと、この「見つかりません」アイコンが2つ並んだ状態でセンタリングされると、本来のアイコンは中央より少し左側にずれることになります。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
- Illustrator(イラストレーター) ワードに貼った画像のキャンバスと画像本体のサイズの調整 2 2022/05/19 18:31
- HTML・CSS 分数が正常に表示されない。 6 2022/05/09 18:53
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- プリンタ・スキャナー 封筒印刷 差出人印刷ずれる 4 2022/05/01 10:12
- ホームページ作成・プログラミング アニメ公式サイト風なWebページを作りたいです。 無料のテンプレートはありますか? 2 2022/04/02 11:33
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像とその下にあるテキストの...
-
【至急お助け!】チェックボッ...
-
画像上に文字を表示するとiPhon...
-
LightBoxの矢印の出し方
-
htmlかcssで背景の白い枠をなく...
-
background-sizeでcontainする...
-
グローバルナビ部分の背景を画...
-
<hr>の縦バージョンはありますか?
-
「HTML(縦スクロールバー付)...
-
ページごとに背景画像を変更し...
-
コーディング中、右側に謎の余...
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像の上にテキスト配置で、拡...
-
css のH1である文字を設定する...
-
background-sizeの背景で最小値...
-
PDFの保存ボタンが表示されません
-
イラレで背景を透明にするやり...
-
アイコンの背景を透過させたい
-
PNG画像を印刷すると背景がきち...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像の上にテキスト配置で、拡...
-
lightbox2で画像を天地左右中央...
-
background-sizeでcontainする...
-
【Webサイト】画像が小さく表示...
-
background-sizeの背景で最小値...
-
【至急お助け!】チェックボッ...
-
画像とその下にあるテキストの...
-
background-repeat CSS で切れ...
-
大至急。webのシングルページを...
-
htmlかcssで背景の白い枠をなく...
-
IMGタグで画像の繰り返し使用は…
-
画像上に文字を表示するとiPhon...
-
同じ画像 複数回使用
-
CSSで背景画像をランダムに表示...
-
画面サイズ変更時のレイアウト...
-
要素の幅をいろんな写真の幅に...
-
Chat GTPで、12月のカレンダー...
-
submitボタンの上に重ねた画像...
-
LightBoxの矢印の出し方
おすすめ情報