เลือกอ่านหัวข้อที่ต้องการได้เลย
การจัดกึ่งกลางเมนู Nav Bar โดยใช้ HTML และ CSS เบื้องต้น
ฝั่งซ้าย
เป็นโคัด HTML จะวางโครงสร้างโคัดแบบนี้ เอาแบบไม่ต้องสลับซ้อนซ้อนอะไรมาก แนะนำให้มี container เป็นตัวคลุมทั้งหมด จะได้จัดการตำแหน่งได้ง่ายและสะดวกยิ่งขึ้น
ทางฝั่งขวา
เป็นโค้ด CSS จะใช้ display: flex ในการจัดแบ่งคอลัมน์
justify-content:space-between; /จัด element ให้ด้านหนึ่งชิดซ้าย และอีกด้านหนึ่งชิดขวา จะใช้
align-items:center; /จัดข้อความให้อยู่ตรงกลาง
.nav-container{
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}
ตัวอย่าง
<nav>
<div class=”nav-container”>
<a href=”index.html”>
<img src=”/imgs/travel-logo.png” class=”logonav”>
</a>
<div class=”nav-profile”>
<p class=”nav-profile-name”>Bearbug</p>
<div class=”nav-profile-cart”></div>
<i class=”fas fa-cart-shopping”></i>
<div class=”cartcount”>5</div>
</div>
</div>
</nav>
nav{
width:100%;
height:7vw;
background:linear-gradient(125deg, #e61b36, #9c1032);
}
.nav-container{
max-width:90vw;
height:100%;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}
.logonav{
width:6vw;
object-fit:contain;
}
.nav-profile{
display:flex;
align-items:center;
}
.nav-profile-name{
color:#fff;
font-size:1.2vw;
margin-right:10px;
}
.fa-cart-shopping{
color:#fff;
font-size:2vw;
}
.nav-profile-cart{
position:relative;
}
.cartcount{
position:absolute;
top: 30px;
right: 93px;
width:25px;
height:25px;
background:red;
border-radius:50px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
}
จัดกึ่งกลางเมนู-Nav-CSS ตอนที่1