Question

我有一个困难，它的约为.accessDeniedHandler( this.acessDeniedHandler() ); @Bean( name = "/accessDeniedPage.htm" ) public AccessDeniedHandler accessDeniedHandler() { return new MyAccessDeniedHandler(); } public class MyAccessDeniedHandler implements AccessDeniedHandler { @Override public void handle(HttpServletRequest request, HttpServletResponse response, AccessDeniedException accessDeniedException) throws IOException, ServletException { System.err.println("Access DENIED "); response.sendRedirect("/public/error.xhtml"); } }，我正在一个单页网站上工作，我有一个导航栏和一个display:table部分，现在位于.product部分内部，我有一个旋转木马，我希望旋转木马垂直居中，所以我使用了以下技术::

.product

FIDDLE HERE

不幸的是，@media only screen and (min-width : 768px) { .products { height: 100%; display: table; width: 100%; } .products .carousel-wrapper { display: table-cell; vertical-align: middle; } }部分和.product元素之间存在差距，两个兄弟元素，如果我将nav添加到产品部分而不是我的布局被搞砸了，但是差距消失了，所以我需要坚持display:block。为什么我已经检查了保证金和填充的差距，但没有，所以我看到没有明显的差距在那里，但它仍然存在。

有人可以告诉我为什么我会遇到这个巨大的差距吗？

Answer 1

您的.navbar班级<{1}}

你有2个跨度，高度为50像素

这是你在小提琴中的差距

你小提琴叉：http://jsfiddle.net/ej8dtd1z/

Answer 2

您的差距是由于您的2个空<span>而您的css规则nav span具有：min-height: 50px !important;

要解决此问题，您可以：

删除<span>

和/或

在菜单<span>中添加一个类，以便将css规则应用于正确的

Answer 3

我在display:table上构建了一个网格系统，使用以下代码：

.products {
  position: relative;/*you wont need this one*/
  display: table;
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  vertical-align: middle;
}

.products > * {
  display: table-cell;
  vertical-align: inherit;
  text-align: center;
}

.youritems { 
  vertical-align: inherit;
  display: inline-block;
  min-height: 1px;
}

首先构建一个表，然后使用.youritems css将内部元素移动到text-align和vertical-align

布局的差距由于显示：表格

3 个答案: