[英]Want to move text to center but can't
I want to move the text on the phone version to the center instead of left.我想把手机版的文字移到中间而不是左边。 I tried everything.
我尝试了一切。 Nothing worked.. any word of advice?
什么都没用..有什么建议吗? I tried aligning it to center in media quarries but it didn't work, as well as padding.
我尝试将它对齐到媒体采石场的中心,但它没有用,填充也是如此。 I am missing what's wrong.. help will be appreciated.
我想念出了什么问题..帮助将不胜感激。
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__img {
width: 32px;
border-radius: 50%;
}
.nav__logo {
color: var(--title-color);
font-weight: 600;
}
@media screen and (max-width: 767px) {
.nav__menu {
position: fixed;
bottom: 0;
left: 0;
background-color: var(--container-color);
box-shadow: 0 -1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
width: 100%;
height: 4rem;
padding: 0 1rem;
display: grid;
align-content: center;
border-radius: 1.25rem 1.25rem 0 0;
transition: .4s;
}
}
.nav__list,
.nav__link {
display: flex;
}
.nav__link {
flex-direction: column;
align-items: center;
row-gap: 4px;
color: var(--title-color);
font-weight: 600;
}
.nav__list {
justify-content: space-around;
}
.nav__name {
font-size: var(--tiny-font-size);
/* display: none;*/ /* Minimalist design, hidden labels */
}
.nav__icon {
font-size: 1.5rem;
}
/*Active link*/
.active-link {
position: relative;
color: var(--first-color);
transition: .3s;
}
/* Minimalist design, active link */
/* .active-link::before{
content: '';
position: absolute;
bottom: -.5rem;
width: 4px;
height: 4px;
background-color: var(--first-color);
border-radius: 50%;
} */
/* Change background header */
.scroll-header {
box-shadow: 0 1px 12px hsla(var(--hue), var(--sat), 15%, 0.15);
}
/*=============== MEDIA QUERIES ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
.nav__name {
display: none;
}
}
/* For medium devices */
@media screen and (min-width: 576px) {
.nav__list {
justify-content: center;
column-gap: 3rem;
}
}
@media screen and (min-width: 767px) {
body {
margin: 0;
}
.section {
padding: 7rem 0 2rem;
}
.nav {
height: calc(var(--header-height) + 1.5rem); /* 4.5rem */
}
.nav__img {
display: none;
}
.nav__icon {
display: none;
}
.nav__name {
font-size: var(--normal-font-size);
/* display: block; */ /* Minimalist design, visible labels */
}
.nav__link:hover {
color: var(--first-color);
}
.active-link::before {
content: '';
position: absolute;
bottom: -.75rem;
width: 4px;
height: 4px;
background-color: var(--first-color);
border-radius: 50%;
}
/* Minimalist design */
/* .active-link::before{
bottom: -.75rem;
} */
}
/* For large devices */
@media screen and (min-width: 1024px) {
.container {
margin-left: auto;
margin-right: auto;
}
}
html html
<header class="header" id="header">
<nav class="nav container">
<a href="#" class="nav__logo">Zatar</a>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li class="nav__item">
<a href="#home" class="nav__link active-link">
<i class='bx bx-home-alt nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
<li class="nav__item">
<a href="#vision" class="nav__link">
<i class='bx bx-user nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
<li class="nav__item">
<a href="#info" class="nav__link">
<i class='bx bx-briefcase-alt nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
<li class="nav__item">
<a href="#contact" class="nav__link">
<i class='bx bx-message-square-detail nav__icon'></i>
<span class="nav__name">sub</span>
</a>
</li>
</ul>
</div>
</nav>
</header>
The Problem is display:flex
you haven't centered it for smaller devices.问题是
display:flex
你没有将它集中在较小的设备上。
.nav {
height: var(--header-height);
display: flex;
justify-content: space-between;
align-items: center;
background: yellow;
}
@media screen and (max-width: 767px) {
.nav{
justify-content: center;
}
}
<a href="#" class="nav__logo">Zatar</a>
Comment here and let me know if it is not what you are looking for I will try again to solve your problem.在这里发表评论,如果这不是您要找的,请告诉我,我会再次尝试解决您的问题。
SeeTohirul's Answer which is a better Solution - Using Justify Content SeeTohirul 的回答是更好的解决方案 -使用对齐内容
EDIT - After discussion in the comments, I have amended the code snippet, to move the nav to the bottom and centre the logo.编辑 - 在评论中进行讨论后,我修改了代码片段,将导航移至底部并将徽标居中。
.nav { height: var(--header-height); display: flex; justify-content: space-between; align-items: center; }.nav__img { width: 32px; border-radius: 50%; }.nav__logo { color: var(--title-color); font-weight: 600; } @media screen and (max-width: 767px) {.nav__menu { position: fixed; bottom: 0; left: 0; background-color: var(--container-color); box-shadow: 0 -1px 12px hsla(var(--hue), var(--sat), 15%, 0.15); width: 100%; height: 4rem; padding: 0 1rem; display: grid; align-content: center; border-radius: 1.25rem 1.25rem 0 0; transition: .4s; }.nav__logo { margin: 0 auto; } }.nav__list, .nav__link { display: flex; }.nav__link { flex-direction: column; align-items: center; row-gap: 4px; color: var(--title-color); font-weight: 600; }.nav__list { justify-content: space-around; }.nav__name { font-size: var(--tiny-font-size); /* display: none;*/ /* Minimalist design, hidden labels */ }.nav__icon { font-size: 1.5rem; } /*Active link*/.active-link { position: relative; color: var(--first-color); transition: .3s; } /* Minimalist design, active link */ /*.active-link::before{ content: ''; position: absolute; bottom: -.5rem; width: 4px; height: 4px; background-color: var(--first-color); border-radius: 50%; } */ /* Change background header */.scroll-header { box-shadow: 0 1px 12px hsla(var(--hue), var(--sat), 15%, 0.15); } /*=============== MEDIA QUERIES ===============*/ /* For small devices */ @media screen and (max-width: 320px) {.nav__name { display: none; } } /* For medium devices */ @media screen and (min-width: 576px) {.nav__list { justify-content: center; column-gap: 3rem; } } @media screen and (min-width: 767px) { body { margin: 0; }.section { padding: 7rem 0 2rem; }.nav { height: calc(var(--header-height) + 1.5rem); /* 4.5rem */ }.nav__img { display: none; }.nav__icon { display: none; }.nav__name { font-size: var(--normal-font-size); /* display: block; */ /* Minimalist design, visible labels */ }.nav__link:hover { color: var(--first-color); }.active-link::before { content: ''; position: absolute; bottom: -.75rem; width: 4px; height: 4px; background-color: var(--first-color); border-radius: 50%; } /* Minimalist design */ /*.active-link::before{ bottom: -.75rem; } */ } /* For large devices */ @media screen and (min-width: 1024px) {.container { margin-left: auto; margin-right: auto; } }
<html> <head> </head> <body> <header class="header" id="header"> <nav class="nav container"> <a href="#" class="nav__logo">Zatar</a> <div class="nav__menu" id="nav-menu"> <ul class="nav__list"> <li class="nav__item"> <a href="#home" class="nav__link active-link"> <i class='bx bx-home-alt nav__icon'></i> <span class="nav__name">sub</span> </a> </li> <li class="nav__item"> <a href="#vision" class="nav__link"> <i class='bx bx-user nav__icon'></i> <span class="nav__name">sub</span> </a> </li> <li class="nav__item"> <a href="#info" class="nav__link"> <i class='bx bx-briefcase-alt nav__icon'></i> <span class="nav__name">sub</span> </a> </li> <li class="nav__item"> <a href="#contact" class="nav__link"> <i class='bx bx-message-square-detail nav__icon'></i> <span class="nav__name">sub</span> </a> </li> </ul> </div> </nav> </header> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.