Q&A
spanをdisplayでblock化した後にimgにスタイル指定。
span.nyuuryoku{
display:block;
position:relative;
}
span.nyuuryoku img{
position:absolute;
bottom: 任意 px;
}
お世話になっております。
文字列<画像>文字列
と表示している所で<画像>が左右の文字列より上部に表示されているので
少し下に表示したいと思っております。
css
.nyuuryoku{
position:relative;
top:10px;
}
html
<p class="fuga hoge">文字列<span class="nyuuryoku"><img src="eventdata/img/entry.jpg"></span>文字列</p>としているのに画像がウンともスンとも動きません……
画像をちょっとしたにずらす
cssの表記方法をお教え頂けないでしょうか？
回答5件
0
ベストアンサー
画像を10px下げたいだけならこのようにするだけで良いです。
なお、.nyuuryokuのpositionプロパティの値をabsoluteにすると、その要素が通常の文書の流れから外れてレイアウトが乱れるので注意してください。
注意点としては、画像を下に10px下げることでp要素の内容からはみ出してしまうので、p要素のmarginプロパティやpaddingプロパティに十分な値を設定して他の要素と重ならないようにしてください。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<meta http-equiv="X-UA-Compatible" content="IE=edge"> 7<meta name="viewport" content="width=device-width, initial-scale=1.0"> 8<style type="text/css"> 9.hoge { 10 /* 11 * 子要素の位置をpositionプロパティで調整する場合、その基点とする親要素にも適切なpositionプロパティの値を指定しておく 12 * 今回は通常の文書の流れにある要素と見られるので relative を指定 13 * (実際には子要素がrelativeであれば親要素の指定は必要ない事が多いが、一応指定しておく) 14 */ 15 position: relative; 16 margin: 0; /* 重なるとはどういう状態か確認できるようにここでは0を指定しています */ 17 padding: 0; /* 画像を下げた分、それを下回らない適切なmarginまたはpaddingを設定してください */ 18 background-color: #ddd; 19} 20 21.nyuuryoku { 22 display: inline-block;/* 文章の流れの中に置いている画像なので inline でも良いが今回は inline-block が適当 */ 23 position: relative; /* 通常の文章の流れにある要素なので relative が適切 */ 24 top: 10px; /* 下に 10px 下げる */ 25} 26 27.content { 28 background-color: #000; 29 color: #fff; 30} 31</style> 32</head> 33<body> 34<p class="hoge">お申込みは<span class="nyuuryoku"><a href="regist.php"><img src="img/entry.jpg" alt="代替テキスト"></a></span>入力して下さい。</p> 35<div class="content">.hogeのmarginやpaddingに十分な値が与えられていないと下にある要素と重なるので注意してください。</div> 36</div> 37</body> 38</html>
追記
この内容は質問で試されているものと同じです。
このコードのみで表示させると画像の位置は10px下にあることが確認できると思います。
moitaroさんの環境で画像が動かないということは、何か別のスタイルで上書きされている可能性があります。
ブラウザのデベロッパーツールなどで該当箇所に適用されているスタイルを確認してみることをおすすめします。
投稿2016/04/22 13:30
編集2016/04/22 14:40
総合スコア617
0
positionを使用して突き進む場合)
css
1.hoge 2{ 3 position:relative; 4} 5.nyuuryoku 6{ 7 position:absolute; 8 top:10px; 9}
html
1<p class="hoge"> 2 <span>文字列</span> 3 <span class="nyuuryoku"><img src="hoge.jpg"></span> 4 <span>文字列</span> ←こちらもabsoluteのleft等で横位置を調整・・ 5</p>
もし全体的に縦を中央寄せしたい場合)
css
1.hoge 2{ 3 display:inline-block; 4 vertical-align:middle; 5}
html
1<p> 2 <div class="hoge">文字列</div> 3 <div class="hoge"><img src="hoge.jpg"></div> 4 <div class="hoge">文字列</div> 5</p>
とかとか。
投稿2016/04/22 08:02
総合スコア151
0
spanがインライン要素だからではないですか？
でなければspanにrelativeでimgにabsoluteで解決です。
投稿2016/04/22 09:00
総合スコア335
0
OV222さんのを拝借しますが、、、
CSS
1.nyuuryoku img{ 2 vertical-align:bottom; 3}
とすると、このクラスのimg要素がだけが変更されます。
もしくは、
CSS
1.nyuuryoku img{ 2 margin-top:20px; 3}
等良いのではないでしょうか？
こまかいデザインは、html側で<div class=""></div>で記述してあげて、css側で設定してもよいかと思います
投稿2016/04/22 08:11
総合スコア69
ご回答ありがとうございます。
html
--------
<p>
お申込みは<span class="nyuuryoku"><a href="regist.php"><img src="img/entry.jpg"></a></span>入力して下さい。</p>
--------
css
--------
.nyuuryoku img{
margin-top:20px;
}
--------
とやっても文字ごと上下してしまうのです……
画像だけ上下に設定したいのですが
私の質問の仕方が不味かったのでしょうか？
spanをdivに変えて、ちなみにa要素もインライン要素だった気がしますので、cssでa要素をdisplay:block;と記述してもらえれば、画像全体にリンクが貼れると思います。
0
画像のスタイルに
css
1vertical-align:middle;
を追加すると良いと思います。(他のパラメータも試してみるのをオススメします）
微調整はline-heightでやると良いと思います。
例えば
css
1.nyuuryoku{ 2 line-height:1.3; 3} 4.nyuuryoku img{ 5 vertical-align:middle; 6}
あと、卑怯臭い方法ですが、
css
1.nyuuryoku img{ 2 display:inline-block; 3 margin-bottom:-5px; /* ここの値を変えると文字の位置が変わる */ 4}
投稿2016/04/22 07:40
編集2016/04/22 09:01
総合スコア47
その
＞画像のスタイルに
の指定方法が分からないのです……
申し訳ないのですがご助力頂けますようよろしくお願い申し上げます。
指定方法とはこのようなことでしょうか？
htmlのhead内に<link rel="stylesheet" type="text/css" href="パス名.css">と記述するとcssが適用されます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。