CSS顶部和底部填充：均匀分割在固定高度边框内 [英] CSS top-and-bottom padding: split evenly within fixed-height border

问题描述

我被要求在网上放置证书，用户可以打印出来。

I've been asked to put a certificate online, that users can then print out. Everything's good to go except I'm having trouble centering everything vertically.

我在div上拥有边框（#outerBorder），另一个嵌套在框架中所有的东西（#wrapper）。 #outerBorder具有固定的高度，以便在打印时证书具有良好的边距。我想#wrapper在它的垂直居中，所以在#outerBorder和#wrapper的顶部和底部之间甚至有填充。

I have on div that holds the border (#outerBorder) and another one nested inside of that which holds all the stuff (#wrapper). The #outerBorder has a fixed height, such that the certificate will have a nice even margin when printed. I'd like the #wrapper to be vertically centered inside it, so that there is even padding between the top and bottom of the #outerBorder and #wrapper.

有一种方法来做这个没有手动计算，然后硬编码的数字？我发现的最近的解决方案是这一个：在垂直方向均匀分布图像固定高度空间
但我真的不喜欢不使用表。

Is there a way to do this without manually calculating and then hard-coding the numbers? The closest solution I've found is this one: Evenly distribute images vertically within fixed-height space But I'd really prefer to not use a table.

我也试过把vertical-align：中间;在CSS中的#wrapper，但是似乎没有做任何事情。

I've also tried putting "vertical-align: middle;" in the CSS for #wrapper, but that doesn't seem to do anything.

谢谢！
-Kristin

Thanks! -Kristin

推荐答案

CSS中的中间对齐是不必要的难以理解的。

Middle align in CSS is unnecessarily elusive.

一个选项是将它添加到您的包装器中：

One option is adding this to your wrapper:

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

这里是 JSFiddle example

Here is a JSFiddle example

这篇关于CSS顶部和底部填充：均匀分割在固定高度边框内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！