调整表的大小问题，以水平和垂直居中 [英] Resize issue with table centered horizontally and vertically

问题描述

简单代码

 < table class =boxborder =1px> 
< tr> 
< td valign =top> 
我的内容
< / td> 
< / tr> 
< / table> 
  

和style

  .box {
 width：300px; 
 height：300px; 
背景颜色：＃d9d9d9; 
位置：绝对; 
 margin-left：-150px; 
 / *宽度的一半* / 
 margin-top：-150px; 
 / *一半身高* / 
 top：50％; 
剩下：50％; 
} 
  

（请参阅 这个小提琴 ）

允许水平和垂直居中。但是，当窗口大小调整为小于表格时，即使显示滚动条，我也无法看到内容的顶部。为什么？

解决方案

给文档添加一个最小高度：

  html {
 position：relative; 
身高：100％; 
 min-height：300px; 
} 
  

这样窗口的高度永远不会小于框。

（身高：100％，因此您的箱子以中心为准）

---

...即使显示滚动条，

您会看到滚动条，因为内容溢出，但 html 的高度不包含该额外空间（当应用负边距时，没有考虑到额外的高度）

Simple code

<table class="box" border="1px">
  <tr>
    <td valign="top">
      my content
    </td>
  </tr>
</table>

and style

.box {
    width:300px;
    height:300px;
    background-color:#d9d9d9;
    position:absolute;
    margin-left:-150px;
    /* half of width */
    margin-top:-150px;
    /* half of height */
    top:50%;
    left:50%;
}

(see this fiddle)

allow to center table horizontally and vertically. However, when window is resized to be smaller than table, even with scroll-bar shown, I am unable to see top of the content. Why?

解决方案

Give a minimum height to your document:

html{
  position:relative;
  height: 100%;
  min-height: 300px;
}

That way the height of the window will never be smaller than the box.

(height:100% is needed so your box gets centered)

---

...even with scroll-bar shown,

you see the scrollbars because there's content that overflows, but the height of the html does not include that extra space (when the negative margin is applied, it does not take into consideration that extra height)

这篇关于调整表的大小问题，以水平和垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！