Question

关注this answer我尝试将我的header元素垂直居中，但是我遇到了麻烦，因为其间有container个元素，确保他们能够＃39} ;包含在某个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 Specification：

在CSS 2.2中，＆＃39; min-width＆＃39;和＆＃39; max-width＆＃39;表，内联表，表格单元格，表格列和列组未定义。

所以似乎目前无法向table-cell添加最大宽度。您可以在table-cell的每一侧添加container，并使用container将宽度设置为1500像素media queries，但这并不是首选，因为有一个解决方法

解决方案

如果您想将link中提供的导航宽度限制为1500px，您可以添加container，就像您所做的那样，但块结构应该略有不同。

现在你有：

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

考虑将结构改为以下：

banner到一个块
container到表格
header_branding和nav_primary到table-cells

banner只是100％宽的背景元素。

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

Here是提供here的CodePen示例，但有一个容器将宽度限制为1500px。

修改了您的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

.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无效，请查看here了解详情。

使用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

Answer 3

也许是

box-sizing: border-box;

属性是您正在寻找的;）

Answer 4

如果您知道container的高度，可以将line-height内的元素垂直对齐以使用header。这样做的缺点是你不能有多行文本，但通常这是第一个意图。

我尝试将代码剥离到最低限度并制作了一个有效的演示版here。

基本上，如果容器高度为160px，您可以为菜单项添加line-height 160px，以便将它们垂直对齐到中间。

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

为了将来的证明，这是我演示中使用的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案:

问题

解决方案