表格单元格不接受最大宽度值

Question

在这个答案之后我尝试垂直居中我的header元素,但是我遇到了麻烦,因为container中间有一个元素可以确保它们包含在某个max-width中心内.我应用于display: table-cell这个元素,现在它max-width不起作用(占据整个屏幕宽度,无论它max-width).如何解决这个问题呢？

标记:

<header class="banner">
  <div class="container">
    <a class="header__branding" href="<?php bloginfo( "wpurl" ); ?>">
      <img src="<?php bloginfo( "template_url" ); ?>/dist/images/baia_logo.svg" />
    </a> 
    <nav class="nav_primary">
      <?php wp_nav_menu( array( 'menu' => 'main menu' ) ); ?>
    </nav>
  </div>
</header>

CSS:

.banner {
    height: 160px;
    width: 100%;
    display: table;
    background: url(../images/header.jpg) 50% 50% repeat-x;
}
.container {
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    vertical-align: middle;
    display: table-cell;
}    
.header__branding {
    float: left;
    width: 150px;
    height: 52px;
    display: block;
}
.nav_primary {
    float: right;
}

Answer 1

以下是您的问题的答案.我会留下旧的替代品.

问题

来自CSS 2.2规范:

在CSS 2.2中,'min-width'和'max-width'对表,内联表,表格单元格,表格列和列组的影响未定义.

所以似乎没有办法为当前添加最大宽度table-cell.你可以在它的table-cell每一侧添加一个container并设置1500px的宽度container,media queries但这不是首选,因为有一个解决方法.

一个办法

如果要将链接中提供的导航宽度限制为1500px,可以container像添加的那样添加,但块结构应该略有不同.

现在你有:

• banner 作为一张桌子
• container 作为一个表格单元格
• header_branding并nav_primary作为细胞内的块

考虑将结构改为以下:

• banner 到一个街区
• container 到一张桌子
• header_branding和nav_primary表格单元格

这banner只是一个100%宽的背景元素.

然后像你一样给出1500px 的containera max-width,但记得也给它100%width.另外它不会尝试扩展到屏幕的整个宽度,因为它不必,但现在max-width将是一个限制因素.

这是此处提供的CodePen示例,但其容器将宽度限制为1500px.

您的示例已修改:

.banner {
    width: 100%;
}

.container {
    max-width: 1500px;
    width: 100%;
    height: 160px;
    margin: auto;
    overflow: hidden;
    display: table;
}

.header_branding, .nav_primary {
    vertical-align: middle;
    display: table-cell;
}

.header_branding {
    width: 150px;
    height: 52px;
}

.nav_primary {
    text-align: right;
}

/* To make edges visible for the demo */
.banner, .container, .header_branding, .nav_primary { 
    background: rgba(0, 0, 0, 0.3);
    border: 1px dotted red;
}

<header class="banner">
  <div class="container">
    <a class="header_branding" href="">
      <img src="" />
    </a>
    
    <nav class="nav_primary">
      [Menu items]
    </nav>
  </div>
</header>