web-dev-qa-db-ja.com

なぜvertical-align：text-top; CSSで動作しない

テキストを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;
}
cssvertical-alignment
70
Ankur

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

vertical-align: top;

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

108
vanstee

vertical-alignは、inlineとしてレンダリングされる要素でのみ機能することになっています。 <span>はデフォルトでインラインとしてレンダリングされますが、すべての要素がレンダリングされるわけではありません。段落ブロック要素<p>は、デフォルトでブロックとしてレンダリングされます。テーブルのレンダリングタイプ（例：table-cell）では、垂直方向の配置も使用できます。

一部のブラウザでは、段落ブロックなどの項目でvertical-align CSSプロパティを使用できますが、そうすることは想定されていません。段落として示されているテキストは、記述言語のコンテンツで埋めるか、マークアップが正しくないため、代わりに他の多くのオプションのいずれかを使用する必要があります。

これがお役に立てば幸いです！

19
mechler

何かのようなもの

  position:relative;
  top:-5px;

インライン要素自体で動作します。垂直方向の中央に配置するには、トップで遊ぶ必要があります...

9
Todd

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

4
Evan Meagher

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

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

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

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

1
RockAndRollBot

上記のすべてが私のために機能しない、私はちょうどこれとその作業をチェックしました：

垂直方向の整列：スーパー。

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

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

0
Ajay2707
position:absolute;
top:0px; 
margin:5px;

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

0
CodeNoob