Issue
I am building my first project, I need to make the title <h2> in the navbar ("la poma") centered in the <div> instead of the right position.
Using flexbox, or float, is not working; are there any suggestions how I can solve this? Should I use CSS grid, or padding?
Thanks in advance.
* {
margin: 0%;
padding: 0%;
}
body {
background: url(./pexels-huy-phan-1383776.jpg) no-repeat;
background-size: cover;
}
nav {
display: flex;
justify-content: center;
}
.header {
display: flex;
padding: 5px 15px;
}
.menu ul {
display: flex;
float: left;
}
.menu li {
padding: 10px 5px;
list-style: none;
}
.Title {
display: flex;
align-items: center;
}
header {
background-color: orange;
display: flex;
justify-content: space-between;
align-items: center;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/3ed3936107.js" crossorigin="anonymous"></script>
<title>Document</title>
<body>
<header>
<nav>
<div class="menu">
<ul class="menu-list">
<li>Home</li>
<li>offer</li>
<li>menu</li>
<li>Branches</li>
</ul>
</div>
</nav>
<h2>La poma</h2>
</header>
</body>
</html>Solution
One approach, with explanatory comments in the code:
/* note that I've removed the vast majority of your CSS, as it
was either complicating things, unnecessary or counter-
productive; this isn't intended as a criticism, you will
get better as you practice: */
* {
margin: 0%;
padding: 0%;
}
header {
/* using CSS grid: */
display: grid;
/* creating three grid-columns of equal width: */
grid-template-columns: repeat(3, 1fr);
}
/* the <nav> is placed in the first column, along with its
descendant elements, the only one we need to style is the
very-wrapped-up ul (via its class-name): */
.menu-list {
/* flex layout, left in its default inline/row arrangement: */
display: flex;
/* laying the child <li> elements with the free-space between the
elements and the start/end of the parent <ul> and their
siblings: */
justify-content: space-around;
/* removing the default list-markers: */
list-style-type: none;
}
/* the <h2> is placed into the second column: */
h2 {
/* along with text-align: center to center its text: */
text-align: center;
}<header>
<nav>
<div class="menu">
<ul class="menu-list">
<li>Home</li>
<li>offer</li>
<li>menu</li>
<li>Branches</li>
</ul>
</div>
</nav>
<h2>La poma</h2>
</header>Answered By - David Thomas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.