画像の上に乗せた文字が勝手に改行してしまいます。
今、画像の上に乗せた文字が
こんばんは!今日は何回 笑いましたか? 挨拶は大事にしましょう 寝る前にその日のことを振り返りま しょう リラックスして次の日を迎えましょ う
のように改行されています。
理想のアウトプットは、
こんばんは!今日は何回笑いましたか? 挨拶は大事にしましょう 寝る前にその日のことを振り返りましょう リラックスして次の日を迎えましょう
のようにすることです。
htmlには
<div class="detailimg"> <img src="{% static 'detail.jpg' %}" alt="詳細"> <h2>こんばんは!今日は何回笑いましたか?<br>挨拶は大事にしましょう</h2> <h3>寝る前にその日のことを振り返りましょう<br>リラックスして次の日を迎えましょう</h3> </div>
と書きcssには
.detailimg{ float: left; position: relative; padding-top:30px; padding-left:80px; padding-right:80px; } .detailimg h2{ position: absolute; font-family :Quicksand, sans-serif; top: 40%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin:0; padding:0; } .detailimg h3{ position: absolute; font-family :Quicksand, sans-serif; top: 70%; left: 50%; -ms-transform: translate(-70%,-70%); -webkit-transform: translate(-70%,-70%); transform: translate(-50%,-50%); margin:0; padding:0; }
と書きました。
-ms-transform: translate ・-webkit-transform: translate ・ transform: translate の値をそれぞれ色々と大きくしたり小さくしたりしていじっても、変なところで改行されるのが直りません。
新しい属性をdetailimg h2とdetailimg h3に追加すべきなのでしょうか?どうしたら目的のアウトプットになりますか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。