I can't align my list into center of my container,
Refer to the screenshot I provided. Can anyone help me to solve this problem ?
I have tried vertical-align = middle, justify content but still not center.
.pink1 {
background-color: pink;
grid-column: 2/4;
height: auto;
font-family: sans-serif;
}
.pink1>h6 {
text-align: center;
}
.pink1>ul {
list-style: none;
align-items: center;
}
.pink1>ul>li {
font-size: 1em;
vertical-align: middle;
}
<div class="pink1 area">
<h6>Navigation</h6>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>CONTACT US</li>
</ul>
</div>
I expect the h6 and list are align center perfectly on the container.
Simple use text-align: center to center align the text horizontally.
For vertical center, you can use display: flex along with flex-direction: column and justify-content: center
See below example
.pink1 {
background-color: pink;
grid-column: 2/4;
height: auto;
font-family: sans-serif;
display: flex;
flex-direction: column; /*For handling elements vertically*/
justify-content: center; /* to Align items vertically center */
min-height: 500px; /* You can remove this. i have added this to show the difference */
}
.pink1>h6 {
text-align: center;
}
.pink1>ul {
list-style: none;
align-items: center;
margin: 0;
padding: 0
}
.pink1>ul>li {
font-size: 1em;
vertical-align: middle;
text-align: center;
padding: 5px 0;
}
<div class="pink1 area">
<h6>Navigation</h6>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>CONTACT US</li>
</ul>
</div>
You need to add only text-align: center, so content centers between the left and right edges.
.pink1 {
background-color: pink;
grid-column: 2/4;
height: auto;
font-family: sans-serif;
}
.pink1>h6 {
text-align: center;
}
.pink1>ul {
list-style: none;
align-items: center;
}
.pink1>ul>li {
font-size: 1em;
text-align: center;
}
<div class="pink1 area">
<h6>Navigation</h6>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>GALLERY</li>
<li>EVENTS</li>
<li>CONTACT US</li>
</ul>
</div>
Hope! this helps
Related
for now i have generated the menu in this way:
nav{
width:1024px;
margin: 0 auto;
}
ul{
display: flex;
justify-content: space-between;
}
li {
border-right: 1.1px solid #333333;
margin: 0 auto;
padding: 0 1em;
text-align: center;
flex-grow: 1;
flex-basis: initial;
text-align: center;
}
the html is:
<nav id="menu">
<ul>
<li>Home</li>
<li>Training & Support</li>
<li>Templates & Forms</li>
<li>Policy Documents</li>
<li>Payment Administration</li>
<li>Tax Compliance</li>
<li>News</li>
</ul>
</nav>
The result is:
But i want that the first and last child are aligned at the start and at the end of the ul container like in the image below
How can i do this?
Have you tried removing text-align: centre; ???Or in li try something like padding-right: 0;Tell me how it works out.
I am trying to center a logo so that it is constantly in the center of my navigation bar, regardless of how many navigation links there are.
This would be easy enough for me if the items at the sides were both even, for example 2 links on the left and 2 on the right, but I'm trying to get 3 on the left and 2 on the right with the centered logo.
Is it possible to center the image using flexbox properties or would I have to go about it a different way, like involving absolute/relative positioning?
header.main-header {
background: url("../images/slides/slide-1.jpg") no-repeat 75%/cover;
height: 100vh;
}
nav.nav-bar {
background-color: tomato;
}
ul.container {
display: flex;
align-items: center;
justify-content: space-around;
padding: 0;
}
ul.container li {
list-style-type: none;
}
li.logo img {
max-width: 125px;
}
<header class="main-header">
<nav class="nav-bar">
<ul class="container">
<li>My Story</li>
<li>Wines</li>
<li>How to Order</li>
<li class="logo"><img src="http://placeimg.com/640/480/any" alt="Wines"></li>
<li>Personal Sommelier</li>
<li>Contact</li>
</ul>
</nav>
<p style="text-align: center;">|<br>(Center)</p>
</header>
Thank you in advance.
Have a great day. :)
An idea is to use the logo as background and centred then you rely on some margin to adjust the menu elements:
header.main-header {
height: 100vh;
}
nav.nav-bar {
background-color: tomato;
}
ul.container {
display: flex;
align-items: center;
padding: 0;
background:url(http://placeimg.com/640/480/any) center/contain no-repeat;
min-height:100px;
}
ul.container li {
list-style-type: none;
margin:0 2%;
}
ul.container li:nth-child(3) {
margin-right:auto;
}
<header class="main-header">
<nav class="nav-bar">
<ul class="container">
<li>My Story</li>
<li>Wines</li>
<li>How to Order</li>
<li>Personal Sommelier</li>
<li>Contact</li>
</ul>
</nav>
<p style="text-align: center;">|<br>(Center)</p>
</header>
But in case you can adjust your HTML you may simply split the menu into 2 parts:
header.main-header {
height: 100vh;
}
nav.nav-bar {
background-color: tomato;
display:flex;
align-items:center;
}
ul.container {
display: flex;
align-items: center;
justify-content:space-around;
flex:1;
padding: 0;
}
img {
max-width:100px;
}
ul.container li {
list-style-type: none;
margin:0 2%;
}
<header class="main-header">
<nav class="nav-bar">
<ul class="container">
<li>My Story</li>
<li>Wines</li>
<li>How to Order</li>
</ul>
<img src="http://placeimg.com/640/480/any" >
<ul class="container">
<li>Personal Sommelier</li>
<li>Contact</li>
</ul>
</nav>
<p style="text-align: center;">|<br>(Center)</p>
</header>
I'm trying to have the elements in the middle 1240px of the screen using a wrapper, however, when I add the wrapper, the .space <li> element stops shrinking when I shrink down the page making my sign in button and sign out button disappear in the right side of the page. Also I've been wondering whether using an empty <li> with flex: 1 is the correct way of creating the space in between the first 3 <li> elements and the last 2.
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 1240px;
margin: 0 auto;
height: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
You need to use percent to make it responsive.
Or, add max-width: 100%; if you want to maintain width: 1240px;
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 100%;
margin: 0 auto;
height: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
Use width: 100%; to nav and wrapper
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 1240px;
margin: 0 auto;
height: 100%;
width: 100%;
}
nav{
width: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
i have this markup which i gave a background color, but the contents just flow out of the background color, even though i gave it height of 100% and a min-height too.
.nav {
padding: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: 40px;
list-style: none;
border: 1px solid red;
}
.nav li {
padding-left: 8px;
padding-right: 8px;
}
<div class="navBar">
<ul class="nav dark-grey">
<li>Home</li>
<li>About</li>
<li>Support</li>
<li>Blog</li>
<li>Blog</li>
</ul>
</div>
I am just trying to build without a framework, please can someone point me in the right direction?
Update the height of .nav to auto instead of 40px, and that should allow it to consume required space.
.nav {
padding: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: auto;
list-style: none;
border: 1px solid red;
}
.nav li {
padding-left: 8px;
padding-right: 8px;
}
<div class="navBar">
<ul class="nav dark-grey">
<li>Home</li>
<li>About</li>
<li>Support</li>
<li>Blog</li>
<li>Blog</li>
</ul>
</div>
That is because you are forcing the height to use height: 40px you need to use min-height:40px;
see fiddle
https://jsfiddle.net/bf6nLmL6/
.nav {
padding: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
min-height: 40px;
list-style: none;
border: 1px solid red;
}
I have update the CSS, please check:
.nav {
padding: 0;
display: flex;
height: 40px;
list-style: none;
border: 1px solid red;
}
.nav li {
padding: 8px;
float: left;
}
<div class="navBar">
<ul class="nav dark-grey">
<li>Home</li>
<li>About</li>
<li>Support</li>
<li>Blog</li>
<li>Blog</li>
</ul>
</div>
Second option:
.nav {
padding: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: auto;
list-style: none;
border: 1px solid red;
}
.nav li {
padding-left: 8px;
padding-right: 8px;
}
<div class="navBar">
<ul class="nav dark-grey">
<li>Home</li>
<li>About</li>
<li>Support</li>
<li>Blog</li>
<li>Blog</li>
</ul>
</div>
Change :
.nav {
height: 40px;
//other codes...
}
To :
.nav {
height: auto;
//other codes...
}
.nav {
padding: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: auto;
list-style: none;
border: 1px solid red;
}
.nav li {
padding-left: 8px;
padding-right: 8px;
}
<div class="navBar">
<ul class="nav dark-grey">
<li>Home</li>
<li>About</li>
<li>Support</li>
<li>Blog</li>
<li>Blog</li>
</ul>
</div>
The copyright info comes as next menu item, but I want it to come on the next row inside the footer as a centered text so tell me please how I can achive this. Please help. thanks in advance.
/* ----- FOOTER ----- */
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
background-color: #333;
padding: 50px;
font-size: 80%;
}
.footer-nav li{
flex-grow: 100%;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"blah</a></li>
<li>blah</li>
<p class = "copyright">aaa</p>
</ul>
</div>
Take out background color from your ulr tag and add it to .wrapper
Also remove the p tag from your ul list and place in outside the list but inside the wrapper
Apply a text-align:center to you p tag
remove padding-top and padding-bottom from your footer for a nice fitting
Snippet below
/* ----- FOOTER ----- */
p{
text-align:center;
}
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
padding: 50px;
padding-top:0;
padding-bottom:0;
font-size: 80%;
}
.footer-nav li{
flex-grow: 100%;
}
.wrapper{
background-color: #333;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"blah</a></li>
<li>blah</li>
</ul>
<p class = "copyright">aaa</p>
</div>
I, you should try using footer element and put <ul> inside and <p> outside of <ul> with a special class to center the text.
CSS :
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
padding: 50px;
font-size: 80%;
}
footer{
background-color: #333;
}
.copyright{
text-align: center;
color: white;
}
.footer-nav li{
flex-grow: 100%;
}
and HTML :
<div class="wrapper">
<footer>
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"</a>blah</li>
<li>blah</li>
</ul>
<p class="copyright">aaa</p>
</footer>
</div>
https://jsfiddle.net/nesquimo/u1pq6xvq/
A bunch of ways you could do it. If you want the copyright in your list, you need to wrap it in an li as only an li can be a child of a ul. Then just give that li a width: 100% or flex-basis: 100% and set the parent to flex-wrap: wrap
.footer-nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
background-color: #333;
padding: 50px 50px 25px;
font-size: 80%;
}
.footer-nav li {
flex-grow: 100%;
}
.copyright {
flex-basis: 100%;
margin-top: 25px;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li class="copyright"><p>aaa</p></li>
</ul>
</div>