2

我被要求将证书放在网上，然后用户可以打印出来。一切都很好，只是我无法将所有内容垂直居中。

我有一个 div 包含边框（#outerBorder）和另一个嵌套在包含所有东西的那个里面（#wrapper）。#outerBorder 具有固定的高度，因此证书在打印时将具有均匀的边距。我希望#wrapper 在其中垂直居中，以便在#outerBorder 和#wrapper 的顶部和底部之间均匀填充。

有没有办法在不手动计算然后对数字进行硬编码的情况下做到这一点？我找到的最接近的解决方案是：在固定高度的空间内垂直均匀分布图像 但我真的更喜欢不使用表格。

我也试过把“垂直对齐：中间；” 在#wrapper的CSS中，但这似乎没有任何作用。

谢谢！-克里斯汀

4

2 回答 2

3

CSS 中的中间对齐是不必要的难以捉摸的。

一种选择是将其添加到您的包装器中：

vertical-align:middle;    
display:table-cell;

这是一个JSFiddle示例

于 2013-04-26T20:33:21.387 回答
0 
Many CSS property not supported by the print media..

At first I can say you use media print tag and write css inside of that for print.Like - 
@media print {
   your css
}
or use external file like 
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

Now please write vertical-align: middle; inside of the print media.

Another idea may be work but it's depend of the structure of the page.That's you can use % value.Like

#outerBorder{
   height :100%;
}

#wrapper{
  height:80%;
  min-height:80%;
  margin-top:10%;
}
于 2013-04-26T20:33:12.033 回答