0

これはかなり基本的な質問のように思えますが、どこにも答えが見つかりません。下の画像では、「Schedule」という単語がスパン内のスパンにあります。青いボックスは CSS の一部ではなく、外部スパンの寸法を示す Firebug のハイライト長方形です。

ここに画像の説明を入力

HTMLは次のとおりです。

<span class="caption">
  <span class="green">Schedule</span>
</span>

問題を示す jsFiddleも作成しました。

どちらのスパンにもパディングやマージンはなく、サイズと色の情報だけがあります。フォント サイズは 48 ピクセルですが、スパンの高さは 65 ピクセルと計算され、テキストはこのスパンの垂直方向の中央に配置されるため、テキストの上部が別の HTML 要素にある時計アイコンと整列しません。

問題は、スパンが含まれるテキストよりも高い理由と、(1) それらを同じサイズにするか、(2) テキストをスパンの上部に揃えるにはどうすればよいかということです。このようにスパンの高さを設定していないことを強調したいと思います。Firefox はこれを行っており、パディングやマージンは含まれていません。

4

3 に答える 3

1

要素のほとんどの寸法を制御しinlineても効果はなく、通常はサポートされていません（インラインにする意図に直接反します）。をまたはに変更する必要がありdisplayます。 inline-blockblock

于 2012-10-10T13:27:27.530 に答える
0

物件をお探しのあなたline-height。これにより、テキストの高さ + 下部上部が決まります。また、次のような背景画像として画像を使用することを検討してくださいurl('<img_url>') no-repeat left center。これにより、画像も中央に配置され、レイアウトが分離されます（この画像は純粋なスタイルであるため）

したがって、適切な高さを得るには、スパンに 48px の行の高さが必要です。

于 2012-10-10T12:54:32.253 に答える
0

スケジュール ワードのコンテナとなる div を作成します。

.container
{
display: table;
height: 200px;
width: 100px;
}

.scheduleThingaMaJig
{
display: table-cell;
vertical-align:middle;
}

スケジュールは垂直方向に中央揃えにする必要があり、水平方向の中央揃えは、.container を中心にテキストを揃えるだけです。使用する必要があります

と思う代わりに。また、img との位置合わせを目的としているだけの場合は、img の寸法だけを指定して、そのように位置合わせを強制し、余分な上部/下部の空白をスケジュールどおりに無視することができます。

于 2012-10-10T16:35:24.407 に答える