如何将 flexbox 的容器置于网格顶部的中心？答案

【问题标题】：How to center the container of a flexbox on top of a grid?如何将 flexbox 的容器置于网格顶部的中心？
【发布时间】：2019-08-26 16:36:34
【问题描述】：

从下面的代码中，导航链接和徽标在标题中居中，但我遇到了将 flexbox 容器居中在网格顶部的问题。如您所见，猫的图像略微偏向右侧。

我尝试过硬编码边距，但计划让此页面响应，因此它不是有效的解决方案。我也尝试为我的导航链接创建一个容器，但它没有改变以边距居中：0 auto。

header
{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    position: sticky;
    width:100%;
    top:0;
}
.nav
{
    position: -webkit-sticky;
    position: sticky;
    top: 0%;
}


.navLink
{
    padding: 0 25px;
    font-weight: 300;
    text-transform: uppercase;
    cursor: pointer;

}

https://jsfiddle.net/2pdxqr05/3/

我希望徽标位于红色和蓝色列之间的死点。

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

你的导航项目都是不同的宽度，享受

这确保了导航项的宽度相等：

header > div{
    width:120px;
}

View updated code here

header
{
	display:flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	position: sticky;
	width:100%;
	top:0;
}

body 
{
	max-width: 100%;
    overflow-x: hidden;
    height: 1000px
    padding: 0px;
	margin: 0px;

}

.nav
{
	position: -webkit-sticky;
	position: sticky;
	top: 0%;
}


.navLink
{
	padding: 0 25px;
	font-weight: 300;
	text-transform: uppercase;
	cursor: pointer;
  text-align:center;

}

header > div{
  width:120px;
}

#logo
{
	margin-top: 4px;
	margin-bottom: 4px;
	//width: 4%;
	//height: 4%;
	cursor: pointer;
}

.container
{
	display: grid;
	grid-template-columns: [content] 1fr [images] 1fr
}

.content 
{
	grid-column: content;
  background-color: red;

}

.images
{
	grid-column: images;
	text-align: center;
  background-color: blue;

}

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
	
	<div class = "nav">
		<header>
			<div class = "navLink" id="story-scroll">Our Story</div>
			<div class = "navLink" id="menu-scroll">Menu</div>
      <div class = "navLink">
			  <img src = "https://placekitten.com/50/50" id="logo" lt="logo">
      </div>
			<div class = "navLink" id="press-scroll">Press</div>
			<div class = "navLink" id="contact-scroll">Contact</div>
		</header>
	</div>
  <div class = "container">

  <div class = "content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
			
  <div class = "images">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
  </div>
</body>
</html>

【讨论】：

感谢您提供快速简便的解决方案。欢迎使用 stackoverflow！

【解决方案2】：

您可以像下面这样调整您的代码。诀窍是处理可用空间分配以确保图像保持在中心：

header {
  display: flex;
  /*justify-content: center; no more needed*/ 
  align-items: center;
  flex-direction: row;
}
header > div:nth-child(2),
header > div:nth-child(4){
  flex:1;
}
/*make the last and first one take more space*/
header > div:first-child,
header > div:last-child{
  flex:5;
}
/*align first and second to right*/
header > div:first-child,
header > div:nth-child(2) {
 text-align:right;
}


body {
  max-width: 100%;
  overflow-x: hidden;
  height: 1000px padding: 0px;
  margin: 0px;
}

.nav {
  position: sticky;
  top: 0;
}

.navLink {
  padding: 0 25px;
  font-weight: 300;
  text-transform: uppercase;
  cursor: pointer;
}

#logo {
  margin-top: 4px;
  margin-bottom: 4px;
  width: 4%;
  height: 4%;
  cursor: pointer;
}

.container {
  display: grid;
  grid-template-columns: [content] 1fr [images] 1fr
}

.content {
  grid-column: content;
  background-color: red;
}

.images {
  grid-column: images;
  text-align: center;
  background-color: blue;
}

<div class="nav">
  <header>
    <div class="navLink" id="story-scroll">Our Story</div>
    <div class="navLink" id="menu-scroll">Menu</div>
    <img src="https://placekitten.com/50/50" id="logo" lt="logo">
    <div class="navLink" id="press-scroll">Press</div>
    <div class="navLink" id="contact-scroll">Contact</div>
  </header>
</div>
<div class="container">

  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>

  <div class="images">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

【讨论】：

感谢您的帮助。我从中学到了很多关于 flexbox 的知识，并计划实现它！