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

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

- drake035

---

所以您想要将container及其所有内容居中放置在header内，而不管container内有什么？ - theblindprophet

是的，我希望“容器”在“标题”内居中。 - drake035

请说明，您需要：

1. 一个具有覆盖整个屏幕宽度的背景的标题。
2. 一个位于标题内部的容器，居中且最大宽度为1500像素。
3. 左侧有标志，右侧有导航菜单。

- vkopio

Answer 1

这里是关于您问题的确切答案，我将保留旧答案作为备选。

问题

来自CSS 2.2规范：

在CSS 2.2中，“min-width”和“max-width”对表格、内联表格、表格单元格、表列和列组的影响是未定义的。

因此，目前似乎没有办法为table-cell添加最大宽度。您可以在container的每一侧添加一个table-cell，并使用media queries将container设置为1500px宽度，但这并不理想，因为有一个解决方法。

---

一个解决方案

如果您想要将链接中提供的导航栏宽度限制在1500px内，您可以像之前一样添加container，但块结构应该略有不同。

现在您有：

• banner作为表格
• container作为表格单元格
• header_branding和nav_primary作为单元格内的块

考虑更改结构如下：

• banner变成块
• container变成表格
• header_branding和nav_primary变成表格单元格

banner仅是一个100％宽的背景元素。

然后给container设置最大宽度为1500px，就像您所做的那样，但请记住还要给它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>

- vkopio

---

谢谢！但是你并没有真正解决问题，问题是要垂直居中“容器”元素本身。相反，你只是在“容器”内部居中了它的内容。所以在我的情况下，我需要将“容器”的高度设置为“横幅”元素的固定高度，对吗？那就是我对你的回答的理解，如果我错了，请纠正我。 - drake035

基本上，头部元素只是一个包装器，始终为您提供100％宽度的背景。容器元素是带有垂直居中内容的表格，其最大宽度限制为1500px。我可以更新此答案，以包括您修改后更易理解的代码。 - vkopio

答案现在已经修改，希望能更好地回答问题。 - vkopio

现在文本本身也应该更清晰。我承认，它有点令人困惑。 - vkopio

Answer 2

在容器内垂直对齐元素的一种可能性是使用line-height，因为您知道header的高度。但缺点是您不能拥有多行文本，但通常这本来就是初衷。

我尝试将您的代码最小化，并创建了一个可工作的演示here。

基本上，如果容器的高度为160px，则可以为菜单项添加160px的line-height以使它们垂直居中。

要垂直对齐您的图像，我使用了this问题中被接受的方法。

为了未来的保护，这是我演示中使用的代码：

* {
    margin: 0; /* Illustrative */
    padding: 0; /* Illustrative */
}

.banner {
 background: #222; /* Illustrative */
 width: 100%;
}
.container {
 background: #aaa; /* Illustrative */
 max-width: 800px; /* Change to desired value */
 margin: auto;
 overflow: hidden;
}    
.header__branding {
 background: #555; /* Illustrative */
 float: left;
 width: 150px;
 height: 160px;
 display: block;
}

.header__branding span {
 height: 100%;
 display: inline-block;
 vertical-align: middle;
 line-height: 160px;
}

.nav_primary {
 float: right;
}

.nav_primary a {
    line-height: 160px;
}

img {
    background: #3867EA; /* Illustrative */
    width: 100px; /* Illustrative */
    height: 100px; /* Illustrative */
    vertical-align: middle;
    display: inline-block;
}

<header class="banner">
  <div class="container">
 <a class="header__branding" href="#">
   <img alt="Logo" /><span>Title</span>
 </a>
 
 <nav class="nav_primary">
   <a>Menu1</a> <a>Menu2</a> <a>Menu3</a>
 </nav>
  </div>
</header>

- vkopio

Answer 3

你可以为 .container 定义一个 height 或 max-height，然后在 header 上使用 flex：

.banner {
    height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}  

CodePen: http://codepen.io/theblindprophet/pen/NAzAWj

这在某些版本的IE中无法正常工作，请查看此处了解详情。

---

使用display: inline-block属性：

/* This parent can be any width and height */
.block {
    text-align: center;

/* May want to do this if there is risk the container may be narrower than the element inside */
    white-space: nowrap;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can also be of any width and height */ 
.centered {
    display: inline-block;
    vertical-align: middle;
    width: 300px;
}

CodePen: http://codepen.io/theblindprophet/pen/XKYKdy

参考资料: CSS Tricks

- theblindprophet

---

谢谢，但是如果你将“container”的“max-width”值更改为1500px，它不起作用（“container”仍然没有视觉上的宽度为1500px）。 - drake035

Answer 4

可能是一个

box-sizing: border-box;

属性就是你要找的东西 ;)

- Steven Dropper