你如何在CSS中垂直居中一个html表。 [英] How do you vertically center an html table in css.
问题描述
无论如何使用css以这样的方式垂直居中一个html表格，它不会改变html表格。当我尝试它时只是搞砸了。
john T写道：
< blockquote class =post_quotes>无论如何使用css垂直居中一个html表，这样就不会改变html表。当我尝试它只是搞砸了。
据我所知，只有两种方式：
一个是绝对定位它50％来自顶部，
，负边距为桌子高度的一半。
这样你就可以忽略一半较小的桌面
窗口，无法使用滚动条访问它。
所以不要使用那个:-)
另一个是把它放在另一张桌子里。一个牢房桌子
甚至。
-
Els
Mente humana écomoára-quedas; funciona melhor aberta。
* john T *：
无论如何使用html表垂直居中css以这样的方式它不会改变html表。
table {display：inline-table;垂直对齐：中间}
我从未见过有必要做这样的事情，所以我从来没有尝试过，但
" display：inline-table"可能不会在很多浏览器中工作，
虽然整体结果是一样的。
要垂直对齐某些东西，渲染器必须知道两个高度，
中的一个要对齐的框和一个包含框。生成的框''html''
和''body''没有可用的视口那么高（即
浏览器窗口的内部高度），但只有他们需要的那么高。随着
的一些hackery，你可以得到所有最近的浏览器，使它们至少100％
高。
-
无用的事实＃4：
可口可乐最初是绿色的。
Els写道：
john T写道：
无论如何使用css垂直居中一个html表这样的方式它不会改变html表。当我尝试它时只是搞砸了。
据我所知，只有两种方法：
一个是绝对定位它从顶部50％，负面表格高度的一半。
根据规格，你将把那张桌子放在
中间的文件中，不在浏览器视口的中间。 MSIE 6
和Mozilla 1.x都有关于pos的％tage的错误。 abs。：
错误105286：用作绝对定位的包含块的视口
元素而不是root（百分比高度，％，底部）
http://bugzilla.mozilla.org/show_bug.cgi?id= 105286
这样你在一个较小的窗口中看不到一半的桌子，没有使用滚动条访问它的方法。
我想知道为什么你说浏览器视口不会提供
任何滚动条。
所以不要使用那一个:-)
另一个是将它放在另一个表中。一个单元格表甚至。
嵌套表绝对不是解决方案;这是一个更糟糕的解决方案。
假设这段代码：
#idTable
{
位置：固定;
顶部：50％;
margin-top：-125px;
身高：250px;
}
（...）
< table id =" idTable" ...>
然后它应该在Mozilla 1.3+和Opera 7.x中完美运行。
DU
Is there anyway to vertically center a html table using css in such a
way it does not alter the html table. When I tryied it just screws up.
john T wrote:
Is there anyway to vertically center a html table using css in such a
way it does not alter the html table. When I tryied it just screws up.
As far as I know there are only two ways:
One is with absolute positioning it at 50% from the top,
with a negative margin of half the height of the table.
this way you lose sight of half the table in a smaller
window, with no way of accessing it by using scrollbars.
So don''t use that one :-)
The other is by placing it in another table. One cell table
even.
--
Els
Mente humana é como pára-quedas; funciona melhor aberta.
*john T*:
Is there anyway to vertically center a html table using css in such a
way it does not alter the html table.
table {display: inline-table; vertical-align: middle}
I''ve never seen any need to do such a thing, so I have never tried that, but
"display: inline-table" will probably not work in a lot of browsers,
although the overall result would be the same.
To vertical align something the renderer has to know two heights, the one of
the box to be aligned and the one of the containing box. The boxes ''html''
and ''body'' generate are not as high as the available viewport (i.e. the
browser window''s inner height), but only as high as they need to be. With
some hackery you can get all recent browsers to make them at least 100%
high, though.
--
Useless Fact #4:
Coca Cola was originally green.
Els wrote:
john T wrote:Is there anyway to vertically center a html table using css in such a
way it does not alter the html table. When I tryied it just screws up.
As far as I know there are only two ways:
One is with absolute positioning it at 50% from the top, with a negative
margin of half the height of the table.
According to the specs, you will center that table within the middle of
the document, not within the middle of the browser viewport. Both MSIE 6
and Mozilla 1.x have bugs regarding %tage with pos. abs.:
Bug 105286: viewport used as containing block for absolutely positioned
elements instead of root (percentage height, %, bottom)
http://bugzilla.mozilla.org/show_bug.cgi?id=105286
this way you lose sight of half the table in a smaller window, with no
way of accessing it by using scrollbars.
I wonder why you say that the browser viewport then would not provide
any scrollbars.
So don''t use that one :-)
The other is by placing it in another table. One cell table even.
Nested tables are definitively NOT a solution; it''s a worse solution.
Assuming this code:
#idTable
{
position: fixed;
top: 50%;
margin-top: -125px;
height: 250px;
}
(...)
<table id="idTable" ...>
then it should work perfectly in Mozilla 1.3+ and in Opera 7.x.
DU
这篇关于你如何在CSS中垂直居中一个html表。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
