Question

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

我已经尝试过硬编码页边距，但计划使此页面具有响应性，因此它不是有效的解决方案。我也尝试过为我的导航链接创建一个容器，但以margin为中心：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 > 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>

Answer 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的容器放在网格顶部居中？

2 个答案: