タグ付けされた質問 「vertical-alignment」

私はいくつかの取得しようとしているinlineとinline-blockコンポーネントはに垂直方向に整列しますdiv。どうしてspanこの例では、プッシュダウンさを主張していますか？との両方vertical-align:middle;を試しましたvertical-align:top;が、何も変わりません。 HTML： <div> <a></a><a></a> <span>Some text</span> </div>​ CSS： a { background-color:#FFF; width:20px; height:20px; display:inline-block; border:solid black 1px; } div { background:yellow; vertical-align:middle; } span { background:red; } RESULT： FIDDLE

142 html  css  vertical-alignment 

高さを固定divしてにdivを追加すると、子divは上から下に表示され、上部の境界に固定されます。 ┌─────────────────────────┐ │ Child Div 1 │ │ Child Div 2 │ │ │ │ │ │ │ └─────────────────────────┘ 私は今、このように下から上に表示しようとしています（下の境界にくっついています）： ┌─────────────────────────┐ │ │ │ │ │ │ │ Child Div 1 │ │ Child Div 2 │ └─────────────────────────┘ ┌─────────────────────────┐ │ │ │ │ │ Child Div 1 │ │ Child …

139 html  css  scrollbar  vertical-alignment  alignment 

不明な幅と高さを取るインラインブロックを作成したいと思います。（その中に動的に生成されたコンテンツを含むテーブルがあります）。さらに、インラインブロックは、「my text（BLOCK HERE）」などのテキスト行内に配置する必要があります。見栄えをよくするために、ブロックを行の垂直方向の中央に配置しようとしています。したがって、ブロックが次のようになっている場合： TOP MIDDLE BOTTOM 次に、テキスト行は「My text（[MIDDLE]）」（行の上下にTOPとBOTTOMがある）になります。 これが私が今まで持っているものです。 CSS .example { background-color: #0A0; display: inline-block; margin: 2px; padding: 2px; position: relative; text-align: center; } HTML <div class="example">TOP<br />MIDDLE<br />BOTTOM</div>

136 html  vertical-alignment  css 

（正方形のアスペクト比を維持するために）ブラウザのサイズを変更すると、幅に応じて高さが変わるコンテナを設定する次のコードがあります。 HTML <div class="responsive-container"> <div class="dummy"></div> <div class="img-container"> <IMG HERE> </div> </div> CSS .responsive-container { position: relative; width: 100%; border: 1px solid black; } .dummy { padding-top: 100%; /* forces 1:1 aspect ratio */ } .img-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } コンテナ内でIMGを垂直に配置するにはどうすればよいですか？すべての画像の高さは可変で、応答性が高いため、コンテナの高さ/行の高さを固定できません...助けてください！

135 html  css  responsive-design  vertical-alignment 

#abc divat 50pxとtextの高さを維持して、の中央で垂直に整列させたいdiv。 body{ padding: 0; margin: 0; margin: 0px auto; } #main{ position: relative; background-color:blue; width:500px; height:500px; } #abc{ font:Verdana, Geneva, sans-serif; font-size:18px; text-align:left; background-color:#0F0; height:50px; vertical-align:middle; } <div id="main"> <div id="abc"> asdfasdfafasdfasdf </div> </div> コードスニペットを実行する結果を非表示スニペットを展開

126 css  vertical-alignment 

UIButtonビューが読み込まれたときに設定されるカスタムフォントを使用するを持っています。 - (void)viewDidLoad { [super viewDidLoad]; self.searchButton.titleLabel.font = [UIFont fontWithName: @"FONTNAME" size: 15.0 ]; } 私が持っている問題は、フォントが中心線から浮いているように見えることです。この行をコメントアウトすると、デフォルトのフォントが垂直方向に中央揃えで表示されます。ただし、カスタムフォントに変更すると、垂直方向の配置が崩れます。 カスタムフォントのテーブルセルでも同じ問題が発生します。 カスタムフォントの高さが他のフォントほど高くないことをビューのどこかに伝える必要がありますか？ 編集：私が使用しているフォントがWindows TrueTypeフォントであることを認識しました。MacのTextEditで問題なく使用できますが、アプリの配置に関する問題のみです

118 ios  objective-c  fonts  vertical-alignment 

Androidで垂直ラベルを表示するには2つの方法が必要です。 水平ラベルが反時計回りに90度回転しました（側面の文字） 上下に文字が入った横型ラベル（店の看板など） 両方のケース（1つのケース）でカスタムウィジェットを開発する必要がありますか？TextViewをそのようにレンダリングするようにできますか？完全にカスタムにする必要がある場合、そのようなことを行うには良い方法は何ですか？

110 android  label  textview  vertical-alignment 

私たちは、MS-Wordの表に行うことができますが、これまでのところ、私はのみ行うことができたように垂直方向に行くようにテキストをしようとしているTHISそれはだから箱が回転して、私は満足していないこれを... ... ISNが」実際の垂直方向のテキストを持つ方法はありますか？ デモでは回転を305度に設定するだけで、テキストが垂直になりません。270degでも、デモは回転を示すためだけに作成しました。

106 html  css  text  vertical-alignment 

<li>タグから生成された固定の高さと幅のボックスの数を連続して表示しています。次に、テキストを垂直方向の中央に揃える必要があります。CSSのvertical-alignは影響しません。おそらく何か不足していますか??? 私は（マージン、パディング、行の高さ）を使用したトリックを探していません。一部のテキストが長く、2行に分割されるため、これらは機能しません。 実際のコードを見つけてください： CSSコード ul.catBlock{ width:960px; height: 270px; border:1px solid #ccc; } ul.catBlock li{ list-style: none; float:left; display:block; text-align: center; width:160px; height: 100px; } ul.catBlock li a{ display: block; padding: 30px 10px 5px 10px; height:60px; } HTMLコード <ul class="catBlock"> <li><a href="#">IP Phone</a></li> <li><a href="#">Dual SIM Switch Server</a></li> <li><a href="#">IP PBX</a></li> …

99 html  css  vertical-alignment 

定義された幅/高さでコンテンツを垂直方向に中央揃えする正しい方法は何でしょうかdiv。 この例では、高さが異なる2つのコンテンツがあり、クラスを使用して両方を垂直方向に中央揃えする最良の方法は何ですか.content。（そしてそれはすべてのブラウザで動作し、の解決策はありませんtable-cell） 心にいくつかのソリューションを持っていますが、1が使用され、他のアイデアを知っていただきたいと思いますposition:absolute; top:0; bottom: 0;とmargin auto。

93 html  css  vertical-alignment 

テキストをブロックの中央に垂直方向に揃えることはわかっていますが、line-heightをブロックの同じ高さに設定します。 ただし、単語の途中にある文がある場合、それは2emです。文全体の行の高さが包含ブロックと同じである場合、大きいテキストは垂直方向に揃えられますが、小さいテキストは大きいテキストと同じベースライン上にあります。 両方のサイズのテキストが垂直方向に揃うように設定するにはどうすればよいですか？

91 css  text  vertical-alignment  baseline 

次のコードを検討してください。 HTML： <div> <label for='name'>Name:</label> <input type='text' id='name' /> </div> CSS： div { height: 50px; border: 1px solid blue; } 置くための最も簡単な方法は何だろうlabelとinputの中間にdiv（縦）？

91 css  html  vertical-alignment 

どのようにして使用することができるvertical-alignだけでなく、float内divのプロパティ？をvertical-align使用しない場合は正常に動作しfloatます。しかし、フロートを使用すると、機能しません。float:right最後のdivにを使用することが重要です。 私は以下を試しています、すべてのdivからfloatを削除すると、正常に機能します： <div class="wrap"> <div class="left">First div, float left, has more text.</div> <div class="left2">Second div, float left </div> <div class="right">Third div, float right</div> </div> CSS： .wrap{ width: 500px; overflow:hidden; background: pink; } .left { width: 150px; margin-right: 10px; background: yellow; float:left; vertical-align: middle; display:inline-block } .left2 { width: 150px; margin-right: …

86 html  css  vertical-alignment 

問題は次のように、特定の文字のようですg、y、q斜面の下には、垂直方向のセンタリングを可能にするものではないことを、尾を持っている、など。ここに問題を紹介する画像があります。 緑色のボックスの文字は、下向きの尾がないため、基本的に完璧です。赤いボックス内の問題は、問題を示しています。 すべてのキャラクターを完全に垂直方向に中央揃えにしてください。画像では、下向きの尾を持つ文字は垂直方向に中央揃えされていません。これを修正することは可能ですか？ ここに問題を完全に示すフィドルがあります。 .avatar { border-radius: 50%; display: inline-block; text-align: center; width: 125px; height: 125px; font-size: 60px; background-color: rgb(81, 75, 93); font-family: "Segoe UI"; margin-bottom: 10px; } .character { position: relative; top: 50%; transform: translateY(-50%); line-height: 100%; color: #fff; } <div class="avatar"> <div class="character">W</div> </div> <div class="avatar"> <div class="character">y</div> …

12 javascript  html  css  vertical-alignment