なぜvertical-align:text-top;なのかCSSで機能しない

StackOverflow https://stackoverflow.com/questions/924282

  •  06-09-2019
  •  | 
  •  

質問

テキストを 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;
}
役に立ちましたか？

解決

垂直-align属性は、インライン要素のためのものです。これは、divのようなブロックレベル要素には影響を与えません。また、テキスト・トップは、現在のフォントサイズの先頭にテキストを移動します。あなたが縦に先頭にインライン要素を合わせたい場合は、単にこれを使用します。

vertical-align: top;

段落タグは時代遅れではありません。また、垂直-align属性は、いくつかのMozillaブラウザで意図したとおりに表示されないことがspan要素に適用される。

他のヒント

vertical-alignのみinlineとしてレンダリングされた要素上で動作するようになっています。 <span>は、デフォルトではインラインとしてレンダリングされ、すべてではない要素があります。段落ブロック要素、<p>は、デフォルトでブロックとしてレンダリングされます。表のレンダリングの種類（例えばtable-cellは）あなたにも、垂直揃える使用できるようになります。

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

私はこのことができます願っています！

のようなもの。

  position:relative;
  top:-5px;

ちょうど自体は私の作品インライン要素に。 ...それは上下中央に取得するには、トップでプレイしている

あなたはdiv要素にposition: relative;を適用し、テキストを含むその中の段落またはスパンにposition: absolute; top: 0;可能性があります。

あなたは、コンテキストセレクタを使用して、そこに垂直整列を移動することができます。そして、これは、pタグで動作します。一例として、以下のこのスニペットを取ります。あなたのクラス内の任意のpタグが垂直アライン制御を尊重します：

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

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

また、垂直揃える他、インライン要素がこれを使用するように、両方のセクションでを保つことができます。

すべての私のために動作しない以上、私はちょうどこれとその作品をチェックしています：

  

垂直整列：スーパー; 

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

私は、パディングによって知っているか、余裕が動作しますが、それは私が好む最後の一品です。

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

私の問題を解決します。

あなたはマージントップを使用することができます。-50％のすべての方法のdivの先頭にテキストを移動する

。 
margin-top: -50%;

私が抱えていた問題は、私が提供した情報からは特定できません:

  • 昔の学校に同封されていたテキストがありました <p> タグ。

変更しました <p> に <span> そしてそれはうまくいきます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top