CSSのテーブルを垂直方向に揃える方法 -- html フィールド と css フィールド と html-table フィールド 関連 問題

How to Vertically Align a Table in CSS












5
vote

問題

日本語

画面の途中でテーブルをCSS?

に垂直に揃える方法
英語

How can I vertically align a table in the middle of the screen with css?

</div
        
 
 

回答リスト

1
 
vote

一般的にこれの行に沿ったものは、定義された高さを持つブロック要素ではかなりよく機能します。

<事前> <コード> table { position: absolute; top: 50%; margin-top: -50%; }

は、身長がないので、ページを中心に困難ですが、これは機能していると思います。

<事前> <コード> html { height: 100%; }

それに応じて行動するブラウザの違いがあるかもしれません。

 

Generally something along the lines of this works pretty well in any block element with a defined height.

table {   position: absolute;  top: 50%;  margin-top: -50%; } 

Centering on the page is harder since you don't have a defined height, but I think this works.

html {  height: 100%; } 

You may encounter some browser differences, act accordingly.

</div
 
 
 
 
1
 
vote

は、垂直方向の整列がテーブルセルの作業をしているため、単に言ったばかりです。

 <コード> body, html {    height: 100%;  }  body {    display: table;  }  #wrapper {    display: table-cell;    vertical-align: middle;   height: 80%; }   

これは垂直方向にあなたのPageWrapperを真ん中に合わせて80%

にします。
 

Shortly said, just make your body a table, because vertical-align does work on table-cells:

body, html {    height: 100%;  }  body {    display: table;  }  #wrapper {    display: table-cell;    vertical-align: middle;   height: 80%; } 

This will vertical align your pagewrapper to middle and let it be fluid 80%

</div
 
 
0
 
vote

表に固定された高さを与えることができ、次にこのサイト i 'からCSSを無料で適応させることができます。行ったばかりです。

説明を複雑にしていますが、基本的にあなたはあなたのコンテンツの周囲の画面の50%の高さで1ピクセルの高「地平線」を設定してから、中心にある要素の上部をその50%ずつずらします。身長。

編集:これは、最初に私の解決策をしました。説明&amp;すべて。

 

If you can give the table a fixed height, then feel free to adapt the CSS from this site I've just done.

Bit complicated to explain, but basically you set a 1 pixel high 'horizon' at 50% height of the screen around your content, then offset the top of the element to be centred (i.e. your table) by 50% of its height.

EDIT: Here's the article I originally made my solution from, with explanation & everything.

</div
 
 

関連する質問

147  テーブルの体をスクロールさせることができますが、その頭を固定させ続けることができますか?  ( How can i let a tables body scroll but keep its head fixed in place ) 
設定サイズを維持するためにHTMLテーブルが必要なページを書いています。私は常にそこに留まるためにテーブルの上部にヘッダーが必要ですが、テーブルにいくつの行が追加されてもスクロールするためにテーブルの本文を必要とします。ミニバージョンのExcelを考えてくださ...

7  IE7 / 8のコルシャンは尊敬されていません  ( Colspan in ie7 8 not respected ) 
DOMは次のようになります。 <事前> <コード> <table> <tr> <td>a</td>...<td>g</td> </tr> <tr> <td colspan="3"> <table> .....

0  追加の代わりにセルを編集するようにJavaScript関数を変更する  ( Change javascript function to edit cells instead of append them ) 
私の質問のあいまいさのためにすみません。傷から始めましょう。 現在これを持っています: http://jsfiddle.net/kmg4x/1/ < / P> そして私が投稿したその他の質問は関連しています:編集可能テーブルのためのJEDITABLEの代替...

7  全体の幅を変更せずにテーブル行を非表示にする方法  ( How to hide table rows without resizing overall width ) 
テーブル全体の幅に影響を与えずにテーブル行を隠す方法はありますか?いくつかのテーブル行を表示/非表示するJavaScriptがいくつか持っていますが、行が display: none; に設定されている場合、表示された行の内容に合わせて縮小したテーブル。 ...

3  Doctype XHTML1-Transional.dtdはテーブルセルの高さを無視します  ( Doctype xhtml1 transitional dtd ignores table cell height ) 
<事前> <コード> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd...

14  応答テーブルデザインを達成するために、TDで表示:TDでブロックを使用することは可能ですか?  ( Is it possible to use displayblock on td in html email to achieve responsive t ) 
この素晴らしい記事では、モバイルブラウザにとっての性的に拡張されたレスポンシブテーブルを作成する方法について説明します。 今私はHTMLの電子メールに同じテクニックを適用しようとしていますが、 display:block はHTMLの電子メールで動作していない...

5  CSSのテーブルを垂直方向に揃える方法  ( How to vertically align a table in css ) 
画面の途中でテーブルをCSS?に垂直に揃える方法 ...

27  レイアウトを構造化するためにテーブルを使用する理由  ( Why use tables to structure your layout ) 
スタックオーバーフローのソースコードを見ると、テーブルとインラインCSSをかなりのビットで使用したことに気付いた。 <コード> <table width="100%"> 具体的な理由があるのであれば、具体的な理由があるのであれば興味がある場合は、人気の...

8  GeckoベースのブラウザのCSSテーブルセルの境界線を消す  ( Disappearing css table cell borders in gecko based browsers ) 
私はヤモリのバグを明らかにするように思われる非常に具体的なHTMLテーブルの構築物を持っています。 これは問題の蒸留版です。 Geckoベースのブラウザ(たとえば、FFなど)の次の表を守ってください。(これをコピーして新しいファイルに貼り付ける必要があります)...

4  連続文字列はTDで包まれていない  ( Continuous string not getting wrapped in td ) 
固定幅TDに長い連続文字列を置くと、ラップされていません。文字列は私のテーブルの幅を増加させます。誰でも私を助けてください。 例えば: これは私のテキストです - TD幅のようにうまく機能します。 しかし、挿入した場合は ThisISistyText ---...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有