This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 18 days ago.
I am trying to create a navbar / header, but I am having some trouble centering an h1-element.
This is my HTML:
body {
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2%;
}
nav {
display: flex;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 10px;
}
h1 {
margin: 0;
text-align: center;
flex-grow: 1;
}
button {
display: inline-block;
}
<header>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<h1>SalonM</h1>
<button>Button</button>
</header>
To be clear, I do not want to center the h1-element relative to the header, I want to center it in regards to the screen.
Any ideas on how to fix this?
Try this:
body {
margin: 0;
padding: 0;
}
.nav-logo {
position: absolute;
display: flex;
justify-content: center;
width: 100%;
height: 100px;
align-items: center;
}
.nav-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2%;
height: 100px;
}
nav {
display: flex;
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
li {
margin-right: 10px;
}
h1 {
margin: 0;
text-align: center;
flex-grow: 1;
}
button {
display: inline-block;
}
<header>
<div class="nav-logo">
<h1>SalonM</h1>
</div>
<div class="nav-wrapper">
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
<button>Button</button>
</div>
</header>
If you put the H1 tag inside a Div tag, you will be able to center the div's content using "text-aling: center;" (The Div must have a defined width).
Related
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 2 years ago.
I'm trying to center the title of the navbar in the middle of the screen. Is there a way to do this without custom margin/padding values (trying to keep it responsive)?
In the image below, I want to center "Title text goes here" in the middle of the screen.
<header>
<nav class="nav">
<img class="nav-logo" src="./jumbotron.jpg" alt="logo">
<h1 class="nav-title">Title text goes here</h1>
<ul class="nav-links">
<li class="nav-link">nav link 1</li>
<li class="nav-link">nav link 2</li>
<li class="nav-link">nav link 3</li>
</ul>
</nav>
</header>
/*****************************************************************************/
/* Navbar */
/*****************************************************************************/
.nav {
display: flex;
flex-direction: row;
justify-content: center;
background-color: white;
}
.nav-logo {
width: 10%;
}
.nav-title {
flex: 1;
margin: auto 0;
text-align: center;
font-size: 30px;
}
.nav-links {
flex: 0.5;
display: flex;
width: 100%;
padding: 20px;
justify-content: flex-end;
list-style: none;
}
You can achieve this with flexbox. By setting align-items to stretch on the header and flex-grow to 1 on the title, the title will expand to cover whatever space is unoccupied by the logo and the links. Then, text-align:center will center your title's text:
.nav {
display: flex;
flex-direction: row;
align-items: stretch
background-color: white;
}
.nav-logo {
width: 10%;
}
.nav-title {
flex-grow: 1;
margin: auto 0;
text-align: center;
font-size: 30px;
text-align: center;
}
.nav-links {
display: flex;
width: 100%;
padding: 20px;
justify-content: flex-end;
list-style: none;
}
I try to chamfer the middle of the menu but I can't find how to do it in CSS.
Here is what I would like :
Didn't found a good way to do it.
Tried with some pseudo elements and bottom-left & bottom-right radius.
I could take the logo with the bottom things I guess, but I'm pretty sure it's possible to do it CSS way, but I can't find how.
Here is how I structured it :
* {
box-sizing: border-box;
}
ul,
li {
list-style: none;
line-height: 1;
display: inline-block;
}
.header {
line-height: 1;
padding-top: 15px;
background-color: #FFF;
}
.header>div {
display: grid;
grid-column-gap: 90px;
align-items: center;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "left center right";
}
.header ul.menu>li:not(:first-child) {
margin-left: 35px;
}
.header li {
display: inline-block;
}
.header__left {
grid-area: left;
justify-self: right;
}
.header__center {
grid-area: center;
}
.header__right {
grid-area: right;
}
<header class="header">
<div class="container">
<div class="header__left">
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
<div class="header__center">
Logo
</div>
<div class="header__right">
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</div>
</header>
I'm not sure what went wrong with your attempt at using pseudo-elements, but this seems to work. You might need to fiddle with margins, padding, and position a bit.
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
margin: 0;
padding: 0;
background-image: url(https://picsum.photos/1600);
background-size: cover;
background-color: pink;
}
ul,
li {
list-style: none;
line-height: 1;
display: inline-block;
}
.header {
line-height: 1;
padding: 0 0 5px;
margin-top: 15px;
position: relative;
overflow: hidden;
}
.header .container {
background-color: #fff;
position: relative;
padding-top: 10px;
margin-bottom: 20px;
}
.header::before {
content: '';
position: absolute;
width: 120px;
height: 120px;
border-radius: 60px;
left: 50%;
transform: translateX(-50%);
top: -35px;
background: #fff;
overflow: hidden;
}
.header>div {
display: grid;
grid-column-gap: 90px;
align-items: center;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "left center right";
}
.header ul.menu>li:not(:first-child) {
margin-left: 35px;
}
.header li {
display: inline-block;
}
.header__left {
grid-area: left;
justify-self: right;
}
.header__center {
grid-area: center;
}
.header__right {
grid-area: right;
}
<header class="header">
<div class="container">
<div class="header__left">
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
<div class="header__center">
<img src="https://via.placeholder.com/50" />
</div>
<div class="header__right">
<ul class="menu">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</div>
</header>
Fiddle demo
I was experimenting with flexbox on IE and noticed that my navigation bar does not work the same on IE compared to all other browsers.
The navigation bar should appear on two lines as soon as the buttons on the right don't fit in the space right next to the logo. If it doesn't fit, it's pushed on the second line with flex-wrap: wrap. And when it's pushed to the second line it centers all buttons over the entire width of the screen.
I fixed this by using a high flex-grow number on the spacer between the logo and the navigation bar. This works well on chrome, edge, etc, but not on internet explorer 11.
The demo I use for to test this:
https://jsfiddle.net/td2rq4h1/
*{
box-sizing: border-box;
}
body{
background: red;
}
.logo{
background-color: yellow;
width: 145px;
height: 70px;
margin-right: 100px;
}
#headermenu{
background-color: gray;
.telephone {
border: 3px solid pink;
width: 145px;
height: 30px;
margin-right: 100px;
}
}
#menu{
background-color: blue;
}
.spacer {
flex-grow: 1000;
background-color: green;
display: flex;
flex-wrap: wrap;
}
.inner-spacer {
flex-grow: 1;
flex-basis: 100%;
}
.link {
flex-grow: 0;
}
nav{
border: 5px solid black;
flex: 1 1;
display: flex;
justify-content: center;
}
ul{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
li{
border: 2px solid purple;
background-color: white;
padding: 1em;
white-space: pre;
margin: 0;
display: inline-block;
}
<div id="menu" class="d-flex flex-wrap">
<div class="logo">Logo</div>
<div class="spacer"></div>
<nav>
<ul class="d-flex flex-row">
<li>Home</li>
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
<li>Nav item 4</li>
<li>Nav item 5</li>
</ul>
</nav>
</div>
Can anybody explain me why this happens and how i could resolve this? Thanks
you may reduce the use of flex: x properties and play with margin instead ... hudge flex value..
example forked from the broken jsfiddle:
* {
box-sizing: border-box;
}
.d-flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
body {
background: red;
}
.logo {
background-color: yellow;
width: 145px;
height: 70px;
margin-right: 100px;
}
#headermenu {
background-color: gray;
}
#headermenu .telephone {
border: 3px solid pink;
width: 145px;
height: 30px;
margin-right: 100px;
}
#menu {
background-color: blue;
}
.spacer {
flex-grow: 1;
background-color: green;
display: flex;
}
nav {
border: 5px solid black;
display: flex;
justify-content: center;
margin: 0 auto;
}
nav ul {
list-style: none;
margin: 0 auto;
padding: 0;
text-align: center;
}
nav ul li {
border: 2px solid purple;
background-color: white;
padding: 1em;
white-space: pre;
margin: 0;
display: inline-block;
}
<div id="menu" class="d-flex flex-wrap">
<div class="logo">Logo</div>
<div class="spacer"></div>
<nav>
<ul class="d-flex flex-row">
<li>Home</li>
<li>Nav item 1</li>
<li>Nav item 2</li>
<li>Nav item 3</li>
<li>Nav item 4</li>
<li>Nav item 5</li>
</ul>
</nav>
</div>
explanation : IE11 will be soon a decade old and did not update bugs on its flex implementation since. it's been edge since, and even edge will stop being updated.
I have a small dilemma with a page design. It's best described in image form.
The top image represents the page as it is now - blue being my nav container and yellow, the page content.
At present, the nav is a full width (split left and right) while content is limited to 1024px wide and simply centered using margin auto.
However, on wide pages this looks odd. So, what I'd like to do is right align the menu items with the right-hand side of the content (as in the lower image). The issue being that I don't know the width of the left/right margin.
I have no doubt that this can be achieved using javascript but given that its fundamental to the page design, I'd rather try and achieve something using CSS.
At present, I'm not even sure this is achievable using CSS alone - anyone done something like this before?
header {
background: blue;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 24px;
height:64px;
width: 100%;
}
.title {
flex: initial;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
nav {
flex: 0 0 auth;
margin-left:40px;
}
ul {
display:flex;
list-style: none;
}
ul > li > a {
color:Black;
padding:0 16px;
white-space:nowrap;
}
main {
background-color:yellow;
max-width:1024px;
margin:0 auto;
}
<header>
<div class="title">This is a really long title that replaces the logo.</div>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
</nav>
</header>
<main>
<p>
This is some content.
</p>
</main>
You can do some calculation with calc(). The header is 100% width and the content is 1024px so inside the header you need to add a padding right equal to one margin which is : (100% - 1024px)/2
body {
margin:0;
}
header {
background: blue;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 24px;
padding-right: calc((100% - 1024px) / 2);
height: 64px;
}
.title {
flex: initial;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
nav {
flex: 0 0 auth;
margin-left: 40px;
}
ul {
display: flex;
list-style: none;
}
ul>li>a {
color: Black;
padding: 0 16px;
white-space: nowrap;
}
main {
max-width: 1024px;
margin: 0 auto;
background: yellow;
}
<header>
<div class="title">This is a really long title that replaces the logo.</div>
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>ul>
</nav>
</header>
<main>
<p>
This is some content.
</p>
</main>
Something like this?
<header>
<div class="title">Mysite.co.uk</div>
<nav id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
</nav>
</header>
header {
width: 100%;
background: blue;
position: relative;
}
header nav {
width: 100%;
max-width: 1024px;
margin 0 auto;
}
header .title {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
}
FIDDLE
You can do something like that:
header {
height: 40px;
display: block;
background: blue;
color: white;
}
nav {
position: absolute;
right: 0;
left: 0;
top: 0;
}
ul {
width: 400px;
margin: auto;
display: flex;
justify-content: flex-end;
padding: 0;
}
section {
background: yellow;
width: 400px;
margin: auto;
}
<header>
Logo
<ul>
<li>item1</li>
<li>item1</li>
</ul>
</header>
<main>
<section>content</section>
</main>
I'm trying to set up a left meny where the li elements stretch to the entire height of the screen whatever the size of the screen.
I can't have the li elements filling the whole height of the screen with the css3 flex property. I've been looking at a good documentation here:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm working with a ul list of elements. Don't know if this is causing the problem ..
This is what I'm trying to do:
#left-drawer-menu {
width: 100%;
list-style-type: none;
margin: 0px;
padding: 0px;
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
#left-drawer-menu li{
background-color: white;
text-align: center;
min-height: 100px;
height: 20%;
}
<ul id="left-drawer-menu">
<li data-icon="contacts"><span class="km-icon km-mostrecent"></span>Available 1</li>
<li data-icon="globe"><span class="km-icon km-mostviewed"></span>Available 2</li>
<li data-icon="camera"><span class="km-icon km-organize"></span>Available 3</li>
<li data-icon="organize"><span class="km-icon km-featured"></span>Available 4</li>
<li data-icon="settings"><span class="km-icon km-action"></span>Available 5</li>
</ul>
Thanks for your help.
You need to :
a) set height 100% to all the elements chain, including the ul, the body and the html
b) set at least flex-grow to the elements
body, html {
height: 100%;
padding: 0px;
}
#left-drawer-menu {
width: 100%;
height: 90%;
list-style-type: none;
margin: 0px;
padding: 0px;
display: -webkit-flex;
-webkit-flex-direction: column;
display: flex;
flex-direction: column;
}
#left-drawer-menu li{
background-color: white;
text-align: center;
flex-grow: 1;
}
fiddle