Question

我被要求在线提供证书，然后用户可以打印出来。一切都很好，除了我无法垂直居中。

我在div上拥有边框（#outerBorder），另一个嵌套在包含所有内容（#wrapper）的内部。 #outerBorder具有固定的高度，因此证书在打印时将具有良好的均匀边距。我希望#wrapper在它内部垂直居中，这样在#outerBorder和#wrapper的顶部和底部之间都有填充。

有没有办法在不手动计算然后对数字进行硬编码的情况下执行此操作？我发现的最接近的解决方案就是这个：Evenly distribute images vertically within fixed-height space 但我真的不想使用桌子。

我也尝试过“vertical-align：middle;”在#wrapper的CSS中，但似乎没有做任何事情。

谢谢！ -Kristin

Answer 1

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

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

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

这是一个JSFiddle示例

Answer 2

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%;
}

CSS top-and-bottom padding：在固定高度边框内均匀分割

2 个答案: