html - div 内のテキストを調整する際の CSS の問題

Question

ここで、画像のタイトル「DRF が白線をはるかに上回っている間に、白線を越えたアカウントと保有開示...

css を使用して行のすぐ上にテキストを配置するにはどうすればよいですか。

HTMLコードは

         <div class="tabs">
            <img src="images/disclosure.png" />
            Accounts and Holdings Disclosure</div>
        <div class="tabs">
            <img src="images/drf.png" />
            DRF</div>

CSSは

.tabs
{
height: 85px;
border-bottom: 1px solid #fff;
text-align: center;
color: #fff;
padding-bottom:7px;
}
.tabs img
{
display: block;
margin-left: auto;
margin-right: auto;
height: 70px;
margin-top: 5px;
}

Answer 1

あなたは書くべきです：

.tabs {
  height: auto;
}

Answer 2

パディングを適用するには、最初のブロックに十分なスペースがありません。.tabs は高さ 85 ピクセル、画像は高さ 70 ピクセル、上部に 5 ピクセルの余白があります。したがって、テキストの残りの垂直方向のスペースは 10 ピクセルのみであり、7 ピクセルのパディングを追加します。

私の意見では、画像のサイズを小さくする必要があります。

Answer 3

する必要があります:

.tabs {
   height: 90px;
}