85

一部のテキストを div の上部に揃えたい。トリックを行う必要があるようですvertical-align: text-top;が、機能しません。div を列に配置し、破線の境界線を表示する (div の上部がどこにあるかを確認できるようにする) など、私が行った他のことはすべて正常に機能します。

#header_p { 
    font-family: Arial;
    font-size: 32px;
    font-weight: bold;
}
#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    vertical-align: text-top;
}
#header_div_left { 
    float: left; 
    width: 50%;
    border: dashed;
    vertical-align: top;
}
#header_div_right { 
    margin-left: 50%;
    width: 50%;
    border: dashed;
}
4

9 に答える 9

125

vertical-align 属性は、インライン要素専用です。div などのブロック レベルの要素には影響しません。また、text-top は、テキストを現在のフォント サイズの一番上に移動するだけです。インライン要素を上に垂直に揃えたい場合は、これを使用してください。

vertical-align: top;

段落タグは時代遅れではありません。また、span 要素に適用された vertical-align 属性が、一部の mozilla ブラウザーで意図したとおりに表示されない場合があります。

于 2009-05-29T03:43:04.833 に答える
25

vertical-alignとしてレンダリングされる要素でのみ動作するはずinlineです。 <span>はデフォルトでインラインとしてレンダリングされますが、すべての要素がインラインになるわけではありません。段落ブロック要素 は<p>、デフォルトでブロックとしてレンダリングされます。テーブル レンダー タイプ (例: table-cell) では、vertical-align も使用できます。

vertical-align一部のブラウザーでは、段落ブロックなどのアイテムで CSS プロパティを使用できる場合がありますが、そうではありません。段落として示されているテキストは、書き言葉の内容で満たされている必要があります。または、マークアップが正しくないため、代わりに他の多くのオプションのいずれかを使用する必要があります。

これが役立つことを願っています！

于 2009-05-31T01:52:16.170 に答える
13

何かのようなもの

  position:relative;
  top:-5px;

インライン要素自体で機能します。垂直方向の中央に配置するには、上部をいじる必要があります...

于 2011-08-15T06:28:40.047 に答える
4

position: relative;divに適用してからposition: absolute; top: 0;、テキストを含む段落またはその中のスパンに適用できます。

于 2009-05-29T04:08:22.380 に答える
1

上記のすべてが私にはうまくいきません。これとその作業を確認したところです:

垂直整列: スーパー;

 <div id="lbk_mng_rdooption" style="float: left;">
     <span class="bold" style="vertical-align: super;">View:</span>
 </div>

パディングまたはマージンによって機能することはわかっていますが、それは私が好む最後の選択です。

于 2015-09-01T06:18:44.183 に答える
1

コンテキスト セレクターを使用して、そこに垂直方向の配置を移動できます。これは p タグで機能します。例として、以下のスニペットを取り上げます。クラス内のすべての p タグは、vertical-align コントロールを尊重します。

#header_selecttxt {
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
}

#header_selecttxt p {
    vertical-align: text-top;
}

他のインライン要素がこれを使用できるように、両方のセクションで垂直方向の配置を維持することもできます。

于 2014-06-11T20:53:43.013 に答える
-1 
position:absolute;
top:0px; 
margin:5px;

私の問題を解決しました。

于 2017-07-18T09:41:02.723 に答える
-1

margin-top: -50% を使用して、テキストを div の一番上まで移動できます。

margin-top: -50%;
于 2013-08-27T15:08:10.150 に答える
-3

私が提供した情報からは、私が抱えていた問題を特定することはできません。

  • <p>古い学校のタグでテキストを囲みました。

に変更しました<p>が<span>、正常に動作します。

于 2009-05-29T03:44:01.217 に答える