プログラミング vertical-alignment

21

なぜvertical-align: middle動作しないのですか？そして、まだ、vertical-align: top ない仕事を。 span{ vertical-align: middle; } <div> <img src="http://lorempixel.com/30/30/" alt="small img" /> <span>Doesn't work.</span> </div> コードスニペットを実行する結果を非表示スニペットを展開

1967 html css alignment vertical-alignment

30

div内で画像を垂直方向に配置する方法

コンテナ内で画像をどのように配置できますdivか？例私の例<img>では<div>、class ="frame「： <div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div> .frameの高さは固定されており、画像の高さは不明です。それが.frame唯一の解決策であれば、新しい要素を追加できます。Internet Explorer 7以降、WebKit、Geckoでこれを実行しようとしています。こちらのjsfiddleを参照してください。 .frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; …

1456 css image vertical-alignment

30

すべてのブラウザーでdivを垂直方向に中央揃えにする方法は？

divCSSを使用して垂直方向に中央揃えにします。テーブルやJavaScriptは必要ありませんが、純粋なCSSだけが必要です。いくつかの解決策を見つけましたが、それらのすべてにInternet Explorer 6のサポートがありません。 <body> <div>Div to be aligned vertically</div> </body> divInternet Explorer 6を含むすべての主要なブラウザーで垂直方向に中央揃えするにはどうすればよいですか？

1367 css cross-browser alignment vertical-alignment centering

30

div内のテキストを垂直方向に配置するにはどうすればよいですか？

テキストをdivに揃える最も効果的な方法を見つけようとしています。私はいくつかのことを試しましたが、どれもうまくいかないようです。 .testimonialText { position: absolute; left: 15px; top: 15px; width: 150px; height: 309px; vertical-align: middle; text-align: center; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; padding: 1em 0 1em 0; } <div class="testimonialText"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et …

1185 html css vertical-alignment

25

divのコンテンツを下に揃える方法

次のCSSおよびHTMLコードがあるとします。 #header { height: 150px; } <div id="header"> <h1>Header title</h1> Header content (one or multiple lines) </div> コードスニペットを実行する結果を非表示スニペットを展開ヘッダーセクションの高さは固定されていますが、ヘッダーの内容が変わる場合があります。ヘッダーのコンテンツをヘッダーセクションの下部に垂直方向に揃えて、テキストの最後の行がヘッダーセクションの下部に「固定」されるようにしたいと考えています。したがって、テキストが1行しかない場合は、次のようになります。 ----------------------------- | ヘッダーのタイトル | | | | ヘッダーの内容（結果は1行になります） ----------------------------- そして、3つの行がある場合： ----------------------------- | ヘッダーのタイトル | | ヘッダーコンテンツ（そうです | それが完璧であることの多くのもの | 3行にまたがる） ----------------------------- CSSでこれを行うにはどうすればよいですか？

1164 html css vertical-alignment

28

div内の要素を垂直方向に整列させる方法は？

2つの画像とh1。それらはすべて、div内で互いに隣接して垂直方向に整列する必要があります。画像の1つをabsolutediv内に配置する必要があります。これがすべての一般的なブラウザで機能するために必要なCSSは何ですか？ <div id="header"> <img src=".." ></img> <h1>testing...</h1> <img src="..."></img> </div>

792 html css vertical-alignment

10

Bootstrapでコンテナーを垂直方向に中央揃えするにはどうすればよいですか？

containerdivをの内部で垂直方向に中央揃えしjumbotron、ページの中央に設定する方法を探しています。 .jumbotronスクリーンの完全な高さと幅に適合しなければなりません。.containerdivが幅を持っている1025pxし、ページ（縦中央）の真ん中にする必要があります。このページでは、ジャンボトロンの垂直方向の中央にコンテナーを配置するとともに、ジャンボトロンを画面の高さと幅に適合させます。どうすればそれを達成できますか？ .jumbotron { height:100%; width:100%; } .container { width:1025px; } .jumbotron .container { max-width: 100%; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="jumbotron"> <div class="container text-center"> <h1>The easiest and powerful way</h1> <div class="row"> <div class="col-md-7"> <div class="top-bg"></div> </div> <div class="col-md-5 iPhone-features" style="margin-left:-25px;"> <ul class="top-features"> <li> <span><i class="fa fa-random simple_bg top-features-bg"></i></span> …

333 html css twitter-bootstrap twitter-bootstrap-3 vertical-alignment

8

マージンまたはパディングを親コンテナの高さのパーセンテージとして設定するにはどうすればよいですか？

私はCSSで垂直方向の配置を作成することに頭を悩ませていました .base{ background-color:green; width:200px; height:200px; overflow:auto; position:relative; } .vert-align{ padding-top:50%; height:50%; }  <div class="base"> <div class="vert-align"> Content Here </div> </div> コードスニペットを実行するHide resultsスニペットを展開これはこのケースでは機能しているように見えましたが、ベースdivの幅を拡大または縮小すると、垂直方向の配置がスナップすることに驚きました。padding-topプロパティを設定すると、パディングは親コンテナの高さのパーセンテージとして取得されると予想していましたが、これはこの場合のベースですが、上記の50％の値は、幅。:( JavaScriptを使用せずに、パディングやマージンを高さのパーセンテージとして設定する方法はありますか？

236 html css vertical-alignment

7

Android：複数行EditText（テキスト領域）の垂直方向の配置

テキスト領域の高さを5行にしたいと思います。次のコードを使用しています。 <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:singleLine="false" android:lines="5" android:layout_marginLeft="10dip" android:layout_marginRight="10dip" /> テキスト領域は正常に見えますが、問題はカーソルがテキストフィールドの中央で点滅していることです。テキストフィールドの最初の文字の最初の行で点滅させたい。

232 android android-edittext vertical-alignment multiline

17

WPF TextBlockのテキストの垂直方向の配置

TextBlock内のテキストに垂直方向の中央揃えを割り当てるにはどうすればよいですか？TextAlignmentプロパティを見つけましたが、それは水平方向のテキスト配置用です。垂直方向のテキストの配置を行うにはどうすればよいですか？

228 wpf vertical-alignment textblock

30

<hr />のような行の中央に中央揃えのテキストを追加します

次のようにテキストの両側に線を作成するために厳密なxhtml 1.0のオプションにはどのようなものがあるのでしょうか。セクション1 -----------------------次のセクション----------------------- セクション2 私はこのようないくつかの空想的なことをすることを考えました： <div style="float:left; width: 44%;"><hr/></div> <div style="float:right; width: 44%;"><hr/></div> Next section または、上記の配置に問題があるため（垂直および水平の両方）： <table><tr> <td style="width:47%"><hr/></td> <td style="vertical-align:middle; text-align: center">Next section</td> <td style="width:47%"><hr/></td> </tr></table> これには整列の問題もありますが、これをこの混乱で解決します。 <table><tr> <td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td> <td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td> <td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td> </tr><tr> <td>&nbsp;</td> …

217 html css xhtml line vertical-alignment

13

Twitter Bootstrapを使用して垂直方向の空白を追加しますか？

Twitterのブートストラップを使用して垂直方向の空白を追加する最良の方法は何ですか？たとえば、ランディングページを作成していて、特定のボタンの上下に少し（100px）の空白スペースが必要だとします。明らかに、その特定のボタンに対して特定のクラスを作成することができます。しかし、Bootstrapには縦の空白を追加するDRYの方法が必要だと思います。

162 twitter-bootstrap whitespace vertical-alignment twitter-bootstrap-2

9

div内の可変の高さでコンテンツを垂直方向に中央揃えする方法は？

コンテンツの高さが可変である場合、divのコンテンツを垂直方向に中央揃えする最良の方法は何ですか。私の特定のケースでは、コンテナーdivの高さは固定されていますが、コンテナーの高さが可変である場合にも機能する解決策があればすばらしいでしょう。また、CSSハックや非セマンティックマークアップをまったく、またはほとんど使用しないソリューションが気に入っています。

158 css vertical-alignment

9

絶対配置された親divの内側にdivを垂直方向に中央揃えする方法

私はピンク色の容器の真ん中に青い容器を入れようとvertical-align: middle;していますが、その場合はうまくいかないようです。 <div style="display: block; position: absolute; left: 50px; top: 50px;"> <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;"> <div style="background-color: lightblue;">test</div> </div> </div> 結果：期待：どうすればそれを達成できるか提案してください。 Jsfiddle

146 html css vertical-alignment absolute

5

SVGのテキスト要素の垂直方向の配置

私がSVGファイルを持っているとしましょう： <svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <text x='20' y='60' style="font-size: 60px">b</text> <text x='100' y='60' style="font-size: 60px">a</text> </svg> どういうわけか上を揃えたい aとb。実は、ポジショニングrooflineはbaseline！ではなく！

142 svg vertical-alignment w3c

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

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