堆棧內存溢出
  簡體   English   中英

偏離中心的Flexbox導航項目

[英]Off center flexbox nav item

 原文  2018-09-20 06:18:42  3   1    html/ css

問題描述

我在頁腳中的中央導航項偏離中心，因此我不確定如何居中，同時仍保持鏈接之間的空間相同。 我將其居中的方法是添加margin-right: 45px ，如在css文件的最底部所示（在codepen中已注釋掉）。 額外的余量會拋出均勻的間距。

在中間鏈接居中放置的同時，如何在所有三個鏈接之間保持均勻間距的同時，使nav容器保持柔韌性？

我什至不確定我要做什么會看起來不錯。 由於左右鏈接的文本長度不同，這可能會使整個導航欄看起來偏離中心。我很沮喪，因為我無法弄清楚該怎么做。

https://codepen.io/pmc222/full/bxzGyy/

的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 */
} */

1 個解決方案

解決方案1
 0 已采納  2018-09-20 06:53:18

您可以將中間鏈接居中，並在項目之間保持均勻的間距，如下所示： 

.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 。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何使用 Flexbox 使項目居中？ 居中對齊導航元素-使用Flexbox 無法使用Flexbox將項目垂直居中 Flexbox 中心和右下角的項目 在Bootstrap Nav中居中一項 Flexbox 垂直居中第一項固定 如何垂直居中Flexbox項目的內容 使用Flexbox垂直居中列表項內容？ 如何將 flexbox 滑塊/旋轉木馬中的第一項居中 每個導航項中的居中對齊下拉菜單
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM