CSSで画像をちょっと下に表示したい
解決済
回答 5
投稿
- 評価
- クリップ 1
- VIEW 3,828
お世話になっております。
文字列<画像>文字列
と表示している所で<画像>が左右の文字列より上部に表示されているので
少し下に表示したいと思っております。
css
.nyuuryoku{
position:relative;
top:10px;
}
html
<p class="fuga hoge">文字列<span class="nyuuryoku"><img src="eventdata/img/entry.jpg"></span>文字列</p>
としているのに画像がウンともスンとも動きません……
画像をちょっとしたにずらす
cssの表記方法をお教え頂けないでしょうか？
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+3
画像を10px下げたいだけならこのようにするだけで良いです。
なお、.nyuuryokuのpositionプロパティの値をabsoluteにすると、その要素が通常の文書の流れから外れてレイアウトが乱れるので注意してください。
注意点としては、画像を下に10px下げることでp要素の内容からはみ出してしまうので、p要素のmarginプロパティやpaddingプロパティに十分な値を設定して他の要素と重ならないようにしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.hoge {
/*
* 子要素の位置をpositionプロパティで調整する場合、その基点とする親要素にも適切なpositionプロパティの値を指定しておく
* 今回は通常の文書の流れにある要素と見られるので relative を指定
* (実際には子要素がrelativeであれば親要素の指定は必要ない事が多いが、一応指定しておく)
*/
position: relative;
margin: 0; /* 重なるとはどういう状態か確認できるようにここでは0を指定しています */
padding: 0; /* 画像を下げた分、それを下回らない適切なmarginまたはpaddingを設定してください */
background-color: #ddd;
}
.nyuuryoku {
display: inline-block;/* 文章の流れの中に置いている画像なので inline でも良いが今回は inline-block が適当 */
position: relative; /* 通常の文章の流れにある要素なので relative が適切 */
top: 10px; /* 下に 10px 下げる */
}
.content {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<p class="hoge">お申込みは<span class="nyuuryoku"><a href="regist.php"><img src="img/entry.jpg" alt="代替テキスト"></a></span>入力して下さい。</p>
<div class="content">.hogeのmarginやpaddingに十分な値が与えられていないと下にある要素と重なるので注意してください。</div>
</div>
</body>
</html>追記
この内容は質問で試されているものと同じです。
このコードのみで表示させると画像の位置は10px下にあることが確認できると思います。
moitaroさんの環境で画像が動かないということは、何か別のスタイルで上書きされている可能性があります。
ブラウザのデベロッパーツールなどで該当箇所に適用されているスタイルを確認してみることをおすすめします。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
positionを使用して突き進む場合)
.hoge
{
position:relative;
}
.nyuuryoku
{
position:absolute;
top:10px;
}<p class="hoge">
<span>文字列</span>
<span class="nyuuryoku"><img src="hoge.jpg"></span>
<span>文字列</span> ←こちらもabsoluteのleft等で横位置を調整・・
</p>もし全体的に縦を中央寄せしたい場合)
.hoge
{
display:inline-block;
vertical-align:middle;
}<p>
<div class="hoge">文字列</div>
<div class="hoge"><img src="hoge.jpg"></div>
<div class="hoge">文字列</div>
</p>とかとか。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
画像のスタイルに
vertical-align:middle;
を追加すると良いと思います。(他のパラメータも試してみるのをオススメします）
微調整はline-heightでやると良いと思います。
例えば
.nyuuryoku{
line-height:1.3;
}
.nyuuryoku img{
vertical-align:middle;
}あと、卑怯臭い方法ですが、
.nyuuryoku img{
display:inline-block;
margin-bottom:-5px; /* ここの値を変えると文字の位置が変わる */
}投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
OV222さんのを拝借しますが、、、
.nyuuryoku img{
vertical-align:bottom;
}
とすると、このクラスのimg要素がだけが変更されます。
もしくは、
.nyuuryoku img{
margin-top:20px;
}
等良いのではないでしょうか？
こまかいデザインは、html側で<div class=""></div>で記述してあげて、css側で設定してもよいかと思います
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
spanがインライン要素だからではないですか？
でなければspanにrelativeでimgにabsoluteで解決です。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
