下記の画像のようにcssを指定したいのですが、
色々試行錯誤しているうちにおかしくなってしまいました。
枠の中の文字が上下左右中央になり、スペシャル判から下3行の文字を小さくするにはどうすればよいでしょうか?
お力を貸してください。
html
1<div class="recommend-entry"> 2<div class="recommend_title">撮影料</div> 3\8,000 4 </div> 5<div style="text-align:center;font-size:xx-large;float:left;padding-top: 70px;">+</div> 6<div class="recommend-entry"> 7<div class="recommend_title">プリント料</div> 8スペシャル判 \5,000<br>デラックス判 \6,000<br>ロイヤル判 \7,000</div>
css
1/*recommen-entry*/ 2.recommend-entry { 3 position: relative; 4 border: 1px solid #666; 5 margin:30px; 6font-size: 30px; 7padding: 3px; 8 width: 300px; 9 height: 150px; 10text-align: center; 11float:left; 12 13 14} 15 16.recommend_title { 17 position: absolute; 18 top: -10px; 19 left: 10px; 20 font-weight: normal; 21 font-size: 120%; 22 background: #fff; 23 padding: 0 .5em; 24font-size: 20px; 25 line-height: 20px 26} 27
上記のcssで今こうなっています↓
今どうなっているのでしょうか。画面キャプチャなど分かるものを提示してください。またHTMLには画像にあるようなプリント料の価格がないようですが・・・?
画像追加しました。htmlでは改行したまででフォントサイズに苦戦してしまい料金までまだ記載していない状態です。
+部分がインラインStyleになってますが、ここは何か理由があるのでしょうか?
いえ、特に理由はないです。
かぶった
例示の画像ではプロント料に値段がはいっていてHTMLにはないようですが何が正解なのでしょうか?しかも<br>で整形していますので微妙。分量を動的に判断してサイズを決めるのか、それとも決め打ちで小さくしていいのかにもよります
すみません。料金の有無など訂正し、再度アップしました。ご確認のほどよろしくお願いいたします。
例えば囲み枠のサイズなどを調整し、行数が増えても左右上下中央揃えになるには動的に判断して、となるのでしょうか?
回答2件
あなたの回答
tips
プレビュー