在
this answer之后,我试图垂直居中我的标题元素,但是我遇到了麻烦,因为中间有一个容器元素,确保它们包含在某个最大宽度内并居中.我将display：table-cell应用于此元素,现在它的最大宽度不起作用(占用整个屏幕宽度,无论其最大宽度如何).如何解决这个问题呢？
标记：
<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;
}
解决方法
以下是您的问题的答案.我会留下旧的替代品.
问题
In CSS 2.2,the effect of ‘min-width’ and ‘max-width’ on tables,inline tables,table cells,table columns,and column groups is undefined.
所以似乎目前没有办法向表格单元格添加最大宽度.您可以在容器的每一侧添加一个表格单元格,并使用媒体查询为容器设置1500px的宽度,但这不是首选,因为有一种解决方法.
一个办法
如果你想限制link到1500px中提供的导航的宽度,你可以像你一样添加一个容器,但块结构应该有点不同.
现在你有：
>横幅作为一张桌子
>容器作为表格单元格
> header_branding和nav_primary作为单元格内的块
考虑将结构改为以下：
>横幅到一个街区
>容器到表
> header_branding和nav_primary到表格单元格
横幅只是100％宽的背景元素.
然后像容量一样给容器一个最大宽度为1500px,但也记得给它100％的宽度.另外它不会尝试扩展到屏幕的整个宽度,因为它不必,但现在最大宽度将是一个限制因素.
Here是here提供的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.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>
