@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans&display=swap');
:root {
/* primary */
--Orange: hsl(26, 100%, 55%);
--Pale-orange: hsl(25, 100%, 94%);
/* neutral */
--Very-dark-blue: hsl(220, 13%, 13%);
--Dark-grayish-blue: hsl(219, 9%, 45%);
--Grayish-blue: hsl(220, 14%, 75%);
--Light-grayish-blue: hsl(223, 64%, 98%);
--White: hsl(0, 0%, 100%);
--Black: hsl(0, 0%, 0%);
/* (with 75% opacity for lightbox background) */
}
html {
font-family: 'Kumbh Sans', sans-serif;
font-size: 16px;
box-sizing: border-box;
}
*,
*:after,
*:before {
box-sizing: inherit;
}
div {
border: 1px dotted grey;
}
body {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
}
/* nav bar */
nav {
display: flex;
place-items: center;
}
.navbar {
width: 80%;
height: 7rem;
background: rgb(201, 159, 159);
}
/* /////////////////////////// */
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(229, 22%, 53%);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<title>Frontend Mentor | E-commerce product page</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<nav>
<div class="navbar">
<div class="navbar-head">sneakers</div>
<div class="navbar-links"></div>
<div class="navbar-user"></div>
</div>
</nav>
<main>
<div class="product">
<div class="product-gallery"></div>
<div class="product-info">
<h5 class="product-origin">
</h4>
<h1 class="product-name">Fall Limited Sneakers</h1>
<p class="product-description">These low-profile sneakers are your perfect casual wear companion. Featuring a durable rubber outer sole, they'll withstand everything the weather can offer.</p>
<div class="product-pricetag">
<div class="price-tag">
<h5 class="price"></h5>
<div class="discount"></div>
<p class="price-original"></p>
</div>
</div>
</div>
</div>
</main>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
</div>
</body>
</html>我试图使导航栏小于视口并使其居中，但我似乎无法使nav元素的子元素居中，在本例中是. navbar。添加margin或padding也不起作用，因为div坚持坚持从它的父对象开始，我还尝试了display：Flex和放置项目中心，不起作用
1条答案
按热度按时间prdp8dxp1#
试试看