Question

我在页脚中的中央导航项偏离中心，因此我不确定如何居中，同时仍保持链接之间的空间相同。我将其居中的方法是添加margin-right: 45px，如css文件最底部所示（在codepen中已注释掉）。额外的边距会消除均匀的间距。

如何在将中间链接居中并在所有三个链接之间保持均匀间距的同时使nav容器保持柔韧性？

我什至不确定我要去的东西看起来不错。由于左右链接的文本长度不同，这可能会使整个导航栏看起来偏离中心。我很沮丧，因为我无法弄清楚该怎么做。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="wedding-index.css">
  <link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <title>Mc-Stamm Wedding</title>
</head>

<body>
  <header class="main-header">
    <i class="fas fa-heart"></i>
    <a class="main-header__link" href="index.html">The Mc-Stamm Wedding</a>
    <i class="fas fa-heart"></i>
  </header>

  <main class="main-container">
    <div class="main-container__image main-container__image-one"><img src="http://www.freegreatpicture.com/files/146/25102-colorful-high-resolution-background.jpg" alt="Walking down beach to the proposal"></div>
    <div class="main-container__image main-container__image-two"><img src="http://www.freegreatpicture.com/files/146/25102-colorful-high-resolution-background.jpg" alt="Close to the proposal spot"></div>
    <div class="main-container__image main-container__image-three"><img src="http://www.freegreatpicture.com/files/146/25102-colorful-high-resolution-background.jpg" alt="Before kneeling"></div>
    <div class="main-container__image main-container__image-four"><img src="http://www.freegreatpicture.com/files/146/25102-colorful-high-resolution-background.jpg" alt="Proposing"></div>
    <div class="main-container__image main-container__image-five"><img src="http://www.freegreatpicture.com/files/146/25102-colorful-high-resolution-background.jpg" alt="She said yes!"></div>
    <div class="main-container__image main-container__image-six"><img src="http://www.freegreatpicture.com/files/146/25102-colorful-high-resolution-background.jpg" alt="Hugging"></div>
    <div class="main-container__image main-container__image-seven"><img src="http://www.freegreatpicture.com/files/146/25102-colorful-high-resolution-background.jpg" alt="Kissing"></div>
    <div class="main-container__image main-container__image-eight"><img src="http://www.freegreatpicture.com/files/146/25102-colorful-high-resolution-background.jpg" alt="Dramatic kiss"></div>
    <div class="main-container__image main-container__image-nine"><img src="http://www.freegreatpicture.com/files/146/25102-colorful-high-resolution-background.jpg" alt="Walking back down beach"></div>
    <div class="main-container__image main-container__image-ten"><img src="https://us.123rf.com/450wm/portocala/portocala1612/portocala161200021/67690040-abstract-geometric-background-circle-generic-backdrop-for-design-square-template-vector.jpg?ver=6" alt="Engaged couple"></div>
    <p class="main-container__paragraph main-container__paragraph-one">Please join us</p>
    <p class="main-container__paragraph main-container__paragraph-two">September 28, 2019</p>
  </main>

  <footer class="main-footer">
    <nav class="main-nav">
      <a class="main-nav__link" href="venue-information.html">Venue Information</a>
      <a class="main-nav__link" href="accommodations.html">Accommodations</a>
      <a class="main-nav__link" href="wedding-party.html">Wedding Party</a>
    </nav>
  </footer>  
</body>
</html>

CSS

/* Wedding Index CSS */

/* browser reset */
html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

img {
  max-width: 100%;
  height: auto;
}
/* end of browser reset */

body {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* Makes <header> element a flexbox */
.main-header {
  display: flex;
  justify-content: center;
  align-items: baseline;
  height: auto;
  width: 100%;
  background: rgb(255, 255, 255);
}

/* Styles index link */
.main-header__link {
  text-decoration: none;
  font-family: 'Great Vibes', cursive;
  font-size: 2rem;
  letter-spacing: 0.1em;
  color: rgb(0, 0, 0);
}

/* Styles and positions icons */
.fas {
  font-size: 1.8rem;
  padding: 15px;
}

/* Makes <main> element a grid-box */
.main-container {
  display: grid;
  grid-template: repeat(28, auto) / repeat(100, 1fr);
  width: 100%;
  background: linear-gradient(rgb(42, 136, 212), rgb(255, 255, 255), rgb(42, 136, 212));
  padding: 20px;
}

/* Transition: scale() duration for div containing images */
.main-container__image {
  transition: ease .3s; 
}

/* Styles images inside div's */
.main-container__image img {
  border: 2px solid rgb(255, 255, 245);
  border-radius: 20px;
}

/* Positions div's on grid and controls overlap depth */
.main-container__image-one {
  grid-area: 1 / 1 / 9 / 13;
  z-index: 1;
}

.main-container__image-two {
  grid-area: 6 / 12 / 14 / 24;
  z-index: 2;
}

.main-container__image-three {
  grid-area: 11 / 23 / 19 / 35;
  z-index: 3;
}

.main-container__image-four {
  grid-area: 16 / 34 / 24 / 46;
  z-index: 4;
}

.main-container__image-five {
  grid-area: 21 / 45 / 29 / 57;
  z-index: 5;
}

.main-container__image-six {
  grid-area: 16 / 56 / 24 / 68;
  z-index: 4;
}

.main-container__image-seven {
  grid-area: 11 / 67 / 19 / 79;
  z-index: 3;
}

.main-container__image-eight {
  grid-area: 6 / 78 / 14 / 90;
  z-index: 2;
}

.main-container__image-nine {
  grid-area: 1 / 89 / 9 / 101;
  z-index: 1;
}

.main-container__image-ten {
  grid-area: 1 / 43 / 16 / 59;
}
/* End of positioning rules */

/* Makes primary image a circle */
.main-container__image-ten img {
  border-radius: 50%;
}

/* Set scale size and depth of hovered image div's */
.main-container__image:hover {
  transform: scale(3.9);
  z-index: 6;
}

/* The following rules position scaled image div's on hover */
.main-container__image-one:hover {
  transform-origin: 0% 3%;
}

.main-container__image-two:hover {
  transform-origin: 30% 25%;
}


.main-container__image-three:hover,
.main-container__image-seven:hover {
  transform-origin: 50% 47%;
}

.main-container__image-four:hover,
.main-container__image-six:hover {
  transform-origin: 50% 69%;
}


.main-container__image-five:hover  {
  transform-origin: 50% 92%;
}

.main-container__image-eight:hover {
  transform-origin: 70% 25%;
}

.main-container__image-nine:hover {
  transform-origin: 100% 3%;
}

.main-container__image-ten:hover {
  transform-origin: 50% 7%;
  transform: scale(2); /* Changed scale for primary image div */
}
/* End of positioning rules for scaled image div's */

/* Changes primary image border shape from circle to same as other image div's on hover */
.main-container__image-ten:hover img {
  border-radius: 20px;
}

/* Styles "Please join us" and "September 28, 2019" */
.main-container__paragraph {
  color: rgb(255, 255, 255);
  font-family: "Great Vibes", cursive;
  font-size: 2.5rem;
  letter-spacing: 0.1em;
}

/* Positions "Please join us" on grid */
.main-container__paragraph-one {
  grid-area: 23 / 9 / 27 / 26;
}

/* Positions "September 28, 2019" on grid */
.main-container__paragraph-two {
  grid-area: 23 / 72 / 27 / 97;
}

/* Style and positons <footer> element */
.main-footer {
  width: 100%;
  height: auto;
  background: rgb(255, 255, 255);
  padding-top: 30px;
}

/* Makes <nav> container a flexbox and positions flex items */
.main-nav {
  display: flex;
  height: auto;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
}

/* Styles link flex items */
.main-nav__link {
  text-decoration: none;
  color: rgb(0, 0, 0);
  font-family: "Montserrat", sans-serif;
  letter-spacing: 0.3em;
}

/* .main-nav__link:nth-of-type(2) {
  margin-right: 45px; /* pushed middle link more toward center, but disrupted space-evenly positioning */
} */

Answer 1

您可以将中间链接居中，并在项目之间保持均匀的间距：

.main-nav__link:not(:nth-of-type(2)) { flex: 1; }
.main-nav__link:first-child { text-align: right; }
.main-nav__link:nth-of-type(2) { margin: 0 10%; } /* Or any other value */
.main-nav__link:last-child { text-align: left; }

然后在.main-nav上删除：

justify-content: space-evenly;

flex: 1;属性告诉您的项目占用剩余空间。由于使用此代码，您的第一个项目和最后一个项目都具有此属性，因此它们将平均分配剩余空间，从而将中间的项目推到中间。

请注意，使用此解决方案时，由于中间项上设置了margins，因此响应可能会有点中断。如果您想使其具有完整的响应性，则可能需要使用media-query。

偏离中心的Flexbox导航项目

1 个答案: