p タグ内のテキストを垂直方向の中央に揃える必要があります。p タグの高さを指定したので、1 行のテキストは p タグの上部に垂直に配置されますが、2 行の説明がある場合は完璧です。
高さ 30px はそのままです。コンテンツを 2 行で終了しているので、高さは同じでなければなりません。
p タグ内のテキストを垂直方向の中央に揃える必要があります。p タグの高さを指定したので、1 行のテキストは p タグの上部に垂直に配置されますが、2 行の説明がある場合は完璧です。
高さ 30px はそのままです。コンテンツを 2 行で終了しているので、高さは同じでなければなりません。
これを試して
p.event_desc{
background: rgba(0,0,0,0.76);
padding:10px 5px;
position:absolute;
top: 0px;
color: #ffffff;
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 16px;
margin: 0 4px 0 0;
width:93%;
}
行の高さを定義できると思いますが、それはデモでうまく機能します。
コードに line-height を実装した場合、あなたの例も正常に機能します。
p.event_desc{
background: rgba(0,0,0,0.76);
padding:4px;
top: 0px;
color: #ffffff;
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 30px;
margin: 0 4px 0 0; width:93%; height:30px;
}
line-height:30pxを定義できるようになりました
このように
p.event_desc{
background: rgba(0,0,0,0.76);
padding:4px;
position:absolute;
top: 0px;
color: #ffffff;
font: bold 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 30px;
margin: 0 4px 0 0; width:93%; height:30px;
}
p
タグに空の img を入れることができます。
<img style="height:38px;" align="middle"/>
(画像の高さは、高さに の余白を加えたものですp
)