I am trying to vertically align the tex of a nav bar that is in display: flex;.
I have used the following code yet the text is still aligned to the top of the nav container and won't move down to the center.
Could you please help me understand what I have done wrong? I have tried moving align-items: center; to the nav{} and nav ul li{} in CSS but it doesn't change anything.
nav {
background-color: aquamarine;
width: 100%;
height: 70px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
}
nav ul li {
font-size: 3rem;
}
<nav>
<ul>
<li>About Us</li>
<li>Event Schedule</li>
<li>Contact Us</li>
</ul>
</nav>
Just add height: 100% to nav ul
nav {
background-color: aquamarine;
width: 100%;
height: 70px;
}
nav ul {
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
height: 100%;
}
nav ul li {
font-size: 3rem;
}
<nav>
<ul>
<li>About Us</li>
<li>Event Schedule</li>
<li>Contact Us</li>
</ul>
</nav>
The items are vertically aligned, or at least they try to be, but you have set the font size so large that they break out of your fixed-height container. Possible solutions:
Don't set the font-size.
Don't fix the height of the parent element.
Related
This question already has answers here:
CSS - Flex one item floated left
(3 answers)
CSS3 Flex: Pull child to the right
(1 answer)
Closed 5 years ago.
I wanna ask about flexbox. If I have code like this
HTML
<nav>
<ul class="container">
<li>First menu</li>
<li>Last menu</li>
</ul>
</nav>
CSS
.container {width: 80%; margin: 0 auto; height: 100%;}
nav { /*some styling height color etc*/ }
ul {
display: flex;
align-items: center;
}
li:first-child {
/*positioning on the left*/
}
li:last-child {
/*positioning on the right*/
}
how can I make the first menu on the left and last menu on the right with css flexbox?
DUPLICATE
: CSS - Flex one item floated left
Simply use justify-content:space-between in parent container:
.container {
width: 80%;
margin: 0 auto;
height: 100%;
}
nav {
/*some styling height color etc*/
}
ul {
display: flex;
align-items: center;
justify-content:space-between;
}
<nav>
<ul class="container">
<li>First menu</li>
<li>Last menu</li>
</ul>
</nav>
Or you can use margin-left:auto; with the last child or margin-right: auto; with the first child item:
.container {
width: 80%;
margin: 0 auto;
height: 100%;
}
nav {
/*some styling height color etc*/
}
ul {
display: flex;
align-items: center;
}
ul > li:first-child {
margin-right:auto;
}
/*or
ul > li:last-child {
margin-left:auto;
}
*/
<nav>
<ul class="container">
<li>First menu</li>
<li>Last menu</li>
</ul>
</nav>
I'm starting with Flexbox and I'm trying to center a row with three columns to the center of the document. I've tried the following code (Written in Sass) but as you can see in the screenshot the three elements are not perfectly centered (they don't have the same space between them):
HTML for the header:
<header>
<nav>
<ul>
<li>ELE 1</li>
<li>ELEMENT 2</li>
<li>ELEMENT 3</li>
</ul>
</nav>
</header>
SCSS for the header:
header {
height: 80px;
width: 100%;
background-color: $dark-grey;
}
nav {
height: inherit;
max-width: 800px;
margin: auto;
text-align: center;
display: flex;
align-items: center;
& ul {
width: 100%;
display: flex;
& li {
flex: 1 0 auto;
& a, a:visited {
color: $white-alpha;
}
& a.active {
color: $white;
}
}
}
}
I've recreated the problem in this CodePen, as you can see the real example. What I'm doing wrong? Thanks.
I have a navigation with ten items inside it and I want to maximize its length and set the spaces between the items equally.
So far, this is what I've done. But it only looks nice if the menu items' lengths are equal, but mine isn't. Ideas, anyone? Thanks in advance.
<nav class="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<!-- eight more menu items -->
</ul>
</nav>
And here's my stylesheet.
.menu {
width: 100%;
}
.menu li {
display: inline-block;
width: 10%; /* since I have 10 items */
text-align: center;
}
View this codepen.
You will need to float your li items left.
CSS:
.menu {
width: 100%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li {
width: 8%;
text-align: center;
margin: 0% 1%;
float: left;
padding: 0;
}
It's important to keep track of your total width (100%). Each item should be 10% (since you are having 10 items) in total. This means when you want a margin of 1% on the left and on the right side, your li item should have a width of 8%.
Your total width should always be 100%. Otherwise your user will be able to scroll horizontally.
add margin for li in css file.
.menu li {
display: inline-block;
margin-left:1%;
width: 6%; /* since I have 10 items */
text-align: center;
}
Or use #media rule is used to define different style rules for different media types/devices
Use the modern flexbox technique for the solution. No need to set any width or margin.
Check the browser compatibility table: Flexbox
Use the CSS Prefixer to support some of the older browsers:
* {
margin: 0;
padding: 0;
}
.menu ul {
display: flex;
flex-direction: row nowrap;
justify-content: space-around;
}
.menu li {
list-style: none;
}
<nav class="menu">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
you could have ato add float css rule to the ul element.
.menu ul{padding:0px;}
.menu {
width: 100%;
}
.menu ul li {
float:left;
width: 10%; /* since I have 10 items */
text-align: center;
}
try with above code
I've browsed around for a while but I believe I have a slightly more unique situation here.
I have a simple navigation which is a <ul> list, with each <li> containing an anchor <a>. The first <li> contains an image which is the logo.
I'd like for each of the subsequent <li> AND <a> elements to expand to the height of the logo, whatever it may be (I would like for the only static height in this solution to be defined on the logo's image, if possible).
The elements should also be vertically centered.
When you hover on the <a> tags, the background and cursor selection should cover the entire height.
I've tried using display: flex; and display: table-cell, with vertical-align: middle and a bunch of other things. I've almost got it but there is some empty space above and below the <a> tags. The only way I can see to fix it is to use a static height on the <a> tags, but I'm posting here to see if anyone knows of any alternatives.
Please note that this doesn't have to be a cross-browser solution (although that would be nice).
Also note that these elements will include a sub-navigation dropdown, so solutions which might include overflow: hidden may not be applicable in that case.
Here is the code:
a {
font-family: 'Trebuchet MS';
text-decoration: none;
}
nav {
background: #444;
}
nav > ul > li {
display: table-cell;
vertical-align: middle;
}
nav > ul > li img {
display: table-cell;
vertical-align: middle;
height: 24px;
padding: 24px;
}
nav > ul > li a {
display: table-cell;
vertical-align: middle;
padding: 24px;
color: #fff;
}
nav > ul > li:hover a {
cursor: pointer;
background: white;
color: #444;
}
<nav role="navigation">
<ul>
<li>
<img src="http://i.imgur.com/ZPB7f3l.png" />
</li>
<li>About
</li>
<li>Work
</li>
<li>Ideas
</li>
<li>Contact
</li>
</ul>
</nav>
Here is the fiddle: http://jsfiddle.net/0br6r0sh/1
Any advice is appreciated!
Thanks,
Ryan
I've tried to implement your requirements using Flexbox. Unfortunately not in a cross browser fashion as it only works on Chrome.
The <img> is given a display: block to remove all padding/margin around it. I've used three sets of display: flex, for the <ul>, <li> and <a>.
a {
font-family: 'Trebuchet MS';
text-decoration: none;
}
nav {
background: #444;
}
nav > ul {
display: flex;
flex-direction: row;
align-items: stretch;
}
nav > ul > li {
background-color: #555;
display: flex;
}
nav > ul > li img {
height: 24px;
padding: 24px;
background-color: #ccc;
display: block;
}
nav > ul > li a {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 24px;
color: #fff;
background-color: #666;
}
nav > ul > li:hover a {
cursor: pointer;
background: white;
color: #444;
}
<nav role="navigation">
<ul>
<li>
<img src="http://i.imgur.com/ZPB7f3l.png" />
</li>
<li>About
</li>
<li>Work
</li>
<li>Ideas
</li>
<li>Contact
</li>
</ul>
</nav>
I have an evenly distributed menu like :
HTML
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
<li>Blog
</li>
</ul>
</nav>
CSS
nav ul {
padding:0;
margin:0;
text-align: justify;
text-transform: uppercase;
background-color: #000;
}
nav ul:after {
content:'';
width: 100%;
display: inline-block;
height: 0;
line-height: 0;
font-size: 0px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
color: #fff;
}
This works great to spread the menu items accross the whole width of the bar as can be seen in this fiddle: http://jsfiddle.net/SjDEX/.
However, you can also see that a result of the ::after element the height of the ul is increased making extra space below the menu items.
Is there a way to get rid of this by making the after element not take up vertical space?
Setting its height to 0 does nothing and changing its display to block or something else breaks the layout.
It is the ul itself that has that height, not the :after, so just add
nav ul {
height: 20px;
}
Fiddle
And this code can be reduced to this:
nav ul:after {
content:'';
width: 100%;
display: inline-block;
}