Как центрировать контейнер флексбокса поверх сетки?

Question

Из приведенного ниже кода навигационные ссылки и логотип центрированы в заголовке, но у меня возникают проблемы с контейнером 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/

Я ожидаю, что логотип окажется мертвой точкой между красной и синей колонками.

Answer 1

Вы можете настроить свой код, как показано ниже.Хитрость заключается в том, чтобы управлять распределением свободного пространства, чтобы быть уверенным, что изображение останется в центре:

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>

Answer 2

Ваши элементы навигации были разной ширины, Наслаждайтесь

Это гарантирует, что ширина элементов навигации будет равна:

header > div{
    width:120px;
}

Просмотреть обновленный код здесь

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>