前提・実現したいこと
・右の白抜きテキストを、背景の角丸ピンクの上下中央に配置
・テキスト量が増加した際は、それに沿って背景の角丸ピンクも拡大する(上下の空きは左右同様30pxを保持)
・親要素にdisplay:table、子要素にdisplay:table-cell以外のやり方で実現したい
どなたかご教授下さい。よろしくお願い申し上げます。
該当のソースコード
html
1 <div class="originalTitleMain"> 2 <p> 3 <a href=""><img class="originalTitleMainImg" src="images/hotTittle08.jpg"></a> 4 </p> 5 <p> 6 <img class="originalTitleMainArrow" src="images/arrow.png"> 7 </p> 8 <p class="originalTitleMainDescription"> 9 スタイルシートの基本. ボックス. テキストフォントスタイルシートの基本. ボックス. テキストフォントスタイルシートの基本. ボックス. テキストフォントスタイルシートの基本. ボックス. テキストフォントスタイルシートの基本. ボックス. テキストフォント 10 </p> 11 </div>
css
1.originalTitleMain{ 2 width: 960px; 3 background-color: #ff5782; 4 border-radius: 20px; 5 min-height: 310px; 6 overflow: hidden; 7 position: relative; 8 margin-bottom: 40px; 9} 10 11.originalTitleMainImg{ 12 width: 435px; 13 padding-left: 30px; 14 position: absolute; 15 top: 50%; 16 margin-top: -122.4415px; 17} 18 19.originalTitleMainArrow{ 20 padding-left: 495px; 21 position: absolute; 22 top: 50%; 23} 24 25.originalTitleMainDescription{ 26 vertical-align: middle; 27 padding-left: 560px; 28 padding-right: 30px; 29 padding-top: 30px; 30 padding-bottom: 30px; 31 color: #ffffff; 32}
試したこと
・同階層の子要素同様absoluteかけてtopとtransformで上下位置調整⇒テキストは上下中央に配置されるが、背景が追従しなくなる
・タグをspanに変更して、vertical-alignで上下位置調整⇒背景は追従するが、テキストが上下中央に配置されない
回答1件
あなたの回答
tips
プレビュー