css 我的徽标文本粘在我的页面左侧，即使我已将其设置为居中

50pmv0ei 于 2022-12-24 发布在其他

关注(0)|答案(3)|浏览(121)

所以我希望我的导航栏是这样的工作和新闻元素在左侧对齐，约克标志文本在中间，关于和联系人元素在右侧。到目前为止，我已经设法使它，使左右工作，但由于某种原因，我似乎找不到我的约克标志坚持到左侧。
我试着改变我给flex属性的类，我也试着改变我设置html的方式。

body {
  font-family: europa, sans-serif;
  padding-left: 3vw;
  padding-right: 3vw;
}

header {
  display: flex;
}

nav {
  display: flex;
}

.nav-left-press,
p {
  color: #b3b3b3;
  margin-left: 1vw;
}

.nav-right-about,
p {
  color: #b3b3b3;
}

.nav-right-contact,
p {
  color: #b3b3b3;
}

.nav-left {
  text-align: left;
}

.nav-right {
  text-align: right;
  position: absolute;
  right: 3vw;
}

.nav-center-logo {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<header id="header">
  <nav class="nav-left">
    <div class="nav-left-work">Work</div>
    <div class="nav-left-press">Press</div>
  </nav>
  <div class="nav-center-logo">YORK</div>
  <nav class="nav-right">
    <div class="nav-right-about">About</div>
    <div class="nav-right-contact">Contact</div>
  </nav>
</header>

css

来源：https://stackoverflow.com/questions/74889558/my-logo-text-sticks-to-the-left-of-my-page-eventhough-i-have-it-set-to-centered

3条答案

按热度按时间

vxbzzdmp1#

body {
  font-family: europa, sans-serif;
  padding-left: 3vw;
  padding-right: 3vw;
}

header {
  display: flex;
    justify-content: space-between;
}

nav {
  display: flex;
}

.nav-left-press,
p {
  color: #b3b3b3;
  margin-left: 1vw;
}
.nav-right-about,
p {
  color: #b3b3b3;
}
.nav-right-contact,
p {
  color: #b3b3b3;
  margin-left: 1vw;
}

.nav-left {
  text-align: left;
}

.nav-right {

}

.nav-center-logo {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<header id="header">
      <nav class="nav-left">
        <div class="nav-left-work">Work</div>
        <div class="nav-left-press">Press</div>
      </nav>
      <div class="nav-center-logo">YORK</div>
      <nav class="nav-right">
        <div class="nav-right-about">About</div>
        <div class="nav-right-contact">Contact</div>
      </nav>
    </header>

我添加了一个理由内容：添加到页眉中。
从你的导航右侧移除绝对位置。
希望这个有用。

赞(0）回复(0）举报 2022-12-24

6ju8rftf2#

我做了两个版本，以您的css，删除两个声明，这是打破了您的位置在.nav-right {}声明和添加justify-content: space-between;到header {}声明，让我知道如果是为您工作了。

body {
  font-family: europa, sans-serif;
  padding-left: 3vw;
  padding-right: 3vw;
}

header {
  display: flex;
  justify-content: space-between;
}

nav {
  display: flex;
}

.nav-left-press,
p {
  color: #b3b3b3;
  margin-left: 1vw;
}

.nav-right-about,
p {
  color: #b3b3b3;
}

.nav-right-contact,
p {
  color: #b3b3b3;
}

.nav-left {
  text-align: left;
}

.nav-right {
  /* text-align: right;
  position: absolute; */
  right: 3vw;
}

.nav-center-logo {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

<header id="header">
      <nav class="nav-left">
        <div class="nav-left-work">Work</div>
        <div class="nav-left-press">Press</div>
      </nav>
      <div class="nav-center-logo">YORK</div>
      <nav class="nav-right">
        <div class="nav-right-about">About</div>
        <div class="nav-right-contact">Contact</div>
      </nav>
    </header>

赞(0）回复(0）举报 2022-12-24

hmae6n7t3#

你需要把width: 100%;添加到.nav-center-logo，但是这样做不会使logo完美地居中，还要把position: absolute;添加到.nav-center-logo，把position: relative;添加到父元素（例如header）。
请参见下面的片段。

body {
  font-family: europa, sans-serif;
  padding-left: 3vw;
  padding-right: 3vw;
}

header {
  display: flex;
  position: relative; /* Added */
}

nav {
  display: flex;
}

.nav-left-press,
p {
  color: #b3b3b3;
  margin-left: 1vw;
}

.nav-right-about,
p {
  color: #b3b3b3;
}

.nav-right-contact,
p {
  color: #b3b3b3;
}

.nav-left {
  text-align: left;
}

.nav-right {
  text-align: right;
  position: absolute;
  right: 3vw;
}

.nav-center-logo {
  text-align: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute; /* Added */
  width: 100%; /* Added */
}

<header id="header">
  <nav class="nav-left">
    <div class="nav-left-work">Work</div>
    <div class="nav-left-press">Press</div>
  </nav>
  <div class="nav-center-logo">YORK</div>
  <nav class="nav-right">
    <div class="nav-right-about">About</div>
    <div class="nav-right-contact">Contact</div>
  </nav>
</header>

赞(0）回复(0）举报 2022-12-24

我来回答

css 我的徽标文本粘在我的页面左侧，即使我已将其设置为居中

3条答案

相关问题

热门标签

最新问答