This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 11 months ago.
I want to center both horizontally and vertically the page.
<body>
<div class="container">
<main>
<section>
<nav>
<ul>
<li>
Create Book
</li>
<li>
Create Author
</li>
<li>
Create Publisher
</li>
</ul>
</nav>
</section>
</main>
</div>
</body>
While I achieved success with horizontal centering by setting all width to 100% and container's width to 50% and margin auto. However the same method doesn't seem to work vertically (height 50%).
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
color: #444;
font-family: sans-serif;
}
.container {
height: 50%;
width: 50%;
margin: auto;
}
Use flex properties
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
}
body {
height: 100%;
width: 100%;
color: #444;
font-family: sans-serif;
}
.container {
height: 50%;
width: 50%;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
}
<div class="container">
<main>
<section>
<nav>
<ul>
<li>
Create Book
</li>
<li>
Create Author
</li>
<li>
Create Publisher
</li>
</ul>
</nav>
</section>
</main>
</div>
Related
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Center one and right/left align other flexbox element
(11 answers)
Closed 9 months ago.
this is my code:
<body>
<header class="nav-header">
<div class="logo"><img width="60" height="60" src="https://images-platform.99static.com//NMiXuAYBnve7fSNymk44pr23_8M=/86x1262:1113x2289/fit-in/500x500/99designs-contests-attachments/131/131688/attachment_131688576"></div>
<div class="title">TITLE</div>
<nav >
<ul class="links">
<li class="link"><a>LINK111111111111111</a></li>
<li class="link"><a>LINK222222222222222</a></li>
<li class="link"><a>LINK333333333333333</a></li>
</ul>
</nav>
</header>
</body>
css:
html, body {
width: 100%;
height: 100%;
}
.nav-header {
width: 100%;
height: 10%;
background-color: rgb(3, 3, 49);
display: flex;
align-items: center;
justify-content: space-between;
}
.links {
list-style: none;
font-family: Arial, Helvetica, sans-serif;
display: flex;
margin: 0 40px;
}
.link {
margin: 0 10px;
}
I want the <div class="title">TITLE</div> to be in the center and not like that:
I have a sidebar that is set to flex with direction column. I am trying to get my menu ul to be vertically centered, and my .logo-container to be on the top of the page.
Is there any way to get one child to flex-start and another one centered?
Code:
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</nav>
</aside>
CSS:
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.logoname {
display: inline-block;
}
* {
color: black;
}
ul {
list-style: none;
}
Codepen
Many thanks!
What you can do is to create an empty/invisible element as a third flex item inside the flex parent (in my example below it's the divwith class xxx) and apply justify-content: space-between to the flex parent (instead of center).
Depending on your actual code and content you should make sure that that additional element has the same height as the nav element (30px in your and my example). And again, depending on the situation you might want to add visibility: hidden; to the additional element (xxx) to make it invisible but still have its height included in the flex position calculations:
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100%;
}
.logoname {
display: inline-block;
}
* {
color: black;
}
ul {
list-style: none;
}
.xxx {
height: 30px;
visibility: hidden;
}
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
<div class="xxx"></div>
</nav>
</aside>
You can try this approach.
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
* {
color: black;
}
ul {
list-style: none;
}
.logo-container {
display:grid;
justify-content:space-around;
margin:0 auto;
padding-top: 20px;
}
.logo-container img {
text-align:center;
padding:5px;
}
<aside class="side-bar">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<nav class="navigation">
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</nav>
</aside>
All you have to do is to have the logo and ul in separate divs within the parent div that has the column direction styling, apply flex-shrink:0 to the div containing the logo and flex-grow: 1 to the other div.
That will allow the logo to be at the top and the other div to take the rest of the space - then you can apply flex styling in the navigation -container to center the ul within that div.
UPDATE - the OP wanted the ul centered into the height of the viewport - as noted in the comments this is as simple as offsetting the position of the ul in the bottom div by half the height of the top div - so in this case - moving it up by 20px) because the top div is 40px in height. This allows centering of the ul into the viewport height without resorting to adding empty divs just to get the alignment.
html {
box-sizing: border-box;
color: white;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
padding: 8px;
}
.navigation {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
align-items: center;
}
.logo-container {
flex-shrink:0
}
.logoname {
display: inline-block;
padding : 8px;
color: lime;
}
.navigation-container {
flex-grow:1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul {
list-style: none;
position: relative;
top: -20px
}
li a{ color: white; }
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<div class="navigation-container">
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</div>
</nav>
</aside>
I know there are duplicates of similar questions to this but I just can't get my footer to stay at the bottom, and I've tried multiple suggested fixes. Please show me how to move the footer to the bottom of the page. Does it have something to do with the body? Whoever posts a solution could you say what it was that was incorrect?
<head>
<meta charset="utf-8">
<title>CopperMug</title>
<link href="Coppermug Stylesheet.css" rel="stylesheet" type="text/css">
</head>
<div class="navbar" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</div>
<body id="body">
<div>
<img src="../Final Logo Assets/Coppermug banner no background 2-min.png" class="img" id="logo">
</div>
</body>
<footer>
<a class="service-link" href="#">Privacy Policy</a>
<a class="service-link" href="#">Terms of Service</a>
</footer>
</html>
#charset "utf-8";
/* CSS Document */
html {
background-image: url("../Final Logo Assets/Blur Mug-min Opacity-min.jpg");
background-repeat: no-repeat;
background-size: cover;
}
#body {
}
#header,
li .nav-link {
font-family: "Copperplate Gothic";
color: #000000
}
#logo { display: block;
margin-left: 26%;
margin-right: auto;
margin-top: 12%;
width: 50%;}
#navbarSupportedContent {
color: black;
font-family: "Copperplate Gothic";
font-size: .99em;
padding: 1em;
}
#navbarSupportedContent li {
list-style-type: none;
display: inline-block;
}
div #navbarSupportedContent {
width: 100%;
}
.navbar {
text-align: center;
position: relative;
font-size: 150%;
margin-left: 3%;
}
.navbar-nav {
text-align: center;
position: relative;
font-size: 150%;
}
footer .service-link {
color: #000000;
}
footer {
text-align: center;
clear: both;
position: relative;
height: 40px;
margin-top: -40px;
}
What you have currently is a footer element which exists as just another plain element in the page flow (FYI, you have a redundant position:relative on it), so where it ends up is wherever the content above it ends (ie your image).
If you want a footer slammed to the bottom of the viewport that always remains visible regardless of content length or scroll position, then you'd use position: fixed on your footer, as crodev's answer shows. However this takes up screen real estate and is used with intention and good reason (like some action bar during some kind of funneled user experience).
However, for regular page circumstances, when you have short content, and want the footer to appear at the bottom of the viewport, it's best using a flex layout like below (which offers all kinds of advantages as well):
Codepen
body {
height: 100vh;
margin: 0;
}
#container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
#header {
background-color: red;
min-height: 100px;
}
#content {
flex: 1;
background-color: green;
/* to test a longer page */
/* min-height: 3000px; */
}
#footer {
background-color: blue;
min-height: 100px;
}
.section {
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
}
<div id="container">
<div id="header" class="section">
header
</div>
<div id="content" class="section">
content
</div>
<div id="footer" class="section">
footer
</div>
</div>
HTML:
<div class="footer">
<p>Footer</p>
</div>
CSS:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: transparent;
color: white;
text-align: center;
}
I'm trying to style a page without the common grid systems using float and clear. The page should use the full viewport for both width and height. The below setup works fine, unless I start resizing the viewport. Once I move the viewport, the navigation and content section suddenly start to overlap, with the content being rendered below the navigation.
Is there something wrong with my approach or should I not use vh and vw when users are likely to resize the viewport?
The setup is meant to be conceivably simple:
A header bar with a height of 40px.
A side navigation section with a width of 20vw
A content section with a width of 80 vw - some margins.
The navigation and content sections are meant to have a min height to fill the viewport.
Sizes like 79.99vw and 99.9vh were introduced to avoid any rounding issues. I have also tried 80vw and 100vh respectively.
My template looks like this:
<div class="dashboard-wrapper">
<header class="header-bar">
<h1 class="bar-title">Brand Logo</h1>
<button class="logout-button">Log out</button>
</header>
<section class="side-bar">
<nav role="navigation" class="sidebar">
<ul>
<li>Navigation One</li>
<li>Navigation Two</li>
<li>Navigation Three</li>
<li>Navigation Four</li>
<li>Navigation Five</li>
</ul>
</nav>
</section>
<section class="content">
<h2>Lorem Ipsum</h2>
<p>Sed ut perspiciatis ...</p>
</section>
</div>
My CSS looks like this:
.dashboard-wrapper {
margin-right: auto;
margin-left: auto;
}
.dashboard-wrapper header.header-bar {
float: top;
height: 40px;
}
.dashboard-wrapper header.header-bar h1 {
position: relative;
margin: 0 0 0 5px;
float: left;
}
.dashboard-wrapper header.header-bar button {
position: relative;
height: 40px;
width: 80px;
border: 0;
float: right;
}
.dashboard-wrapper section.side-bar {
float: left;
clear: left;
width: 20vw;
min-height: calc(99.9vh - 40px - 20px);
margin: 10px;
background: white;
}
.dashboard-wrapper section.content {
float: right;
clear: right;
position: relative;
width: calc(79.99vw - 30px);
min-height: calc(99.9vh - 40px - 20px);
margin: 10px 10px 10px 0;
background: white;
}
This was so far only tested in Chrome on Windows.
Removed invalid float:top,
added clearfix class : .cf to clear floats
added box-sizing:border-box just in case you might use padding
switched width using vw units for % units to get rounded values when using calc and to get consistent result across devices.
a few other small things.
* {
box-sizing: border-box
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
body {
margin: 0;
}
.dashboard-wrapper header.header-bar {
height: 40px;
/*demo*/
background: green
}
.dashboard-wrapper header.header-bar h1 {
margin: 0 0 0 5px;
float: left;
}
.dashboard-wrapper header.header-bar button {
height: 40px;
width: 80px;
border: 0;
float: right;
}
.dashboard-wrapper section.side-bar {
float: left;
width: 20%;
min-height: calc(100vh - 60px);
margin: 10px;
background: red;
}
.dashboard-wrapper section.content {
float: left;
width: calc(80% - 30px);
min-height: calc(100vh - 60px);
margin: 10px 10px 10px 0;
background: lightblue;
}
footer {
background:orange;
width:100%
}
<div class="dashboard-wrapper">
<header class="header-bar cf">
<h1 class="bar-title">Brand Logo</h1>
<button class="logout-button">Log out</button>
</header>
<div class="main-wrapper cf">
<section class="side-bar">
<nav role="navigation" class="sidebar">
<ul>
<li>Navigation One</li>
<li>Navigation Two</li>
<li>Navigation Three</li>
<li>Navigation Four</li>
<li>Navigation Five</li>
</ul>
</nav>
</section>
<section class="content">
<h2>Lorem Ipsum</h2>
<p>Sed ut perspiciatis ...</p>
</section>
</div>
<footer>
Lorem Ipsum ed ut perspiciatis ...
</footer>
</div>
The picture below shows what I would like to get.
It is a menu within a container, where the menu may wrap to multiple lines when the window/screen gets too narrow for all menu items to fit in. At the same time I would like the menu to have a background which expands to full screen in width, while expanding in height with the menu when it gets wrapped to multiple lines. Currently I think this is not possible with CSS, but I am also just a CSS amateur. My current solution involves #media queries to set the height of the menu background for resolutions where wrapping appears. This does not take into account that font-size could change, thus making each line of menu higher.
Here is a jsFiddle with a basic setup, which does NOT what I want:
https://jsfiddle.net/n3jmyq2f/3/ (Edited, was not the final version)
Here is the code:
<div class="container">
<div class="menu_wrap">
<div class="menu_bg"></div>
<div class="menu">
<ul>
<li>item 1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
<div class="content">It's me, Mario!</div>
CSS:
.container {
width:50%;
margin: 0 auto;
background:lightgreen;
height:300px;
}
.menu_bg{
position: absolute;
background: #afafaf;
width: 100%;
left:0;
height:30px;
z-index: -1;
}
ul {
height:30px;
background: #afafaf;
}
li {
display:inline-block;
}
The first option is the simplest.
Stop thinking of the .container as something that must contain everything. It's just a class that can be reused as and when required.
If you take the menu div out of the "container" but put a .container div inside you get the effect you are looking for.
JSfiddle Demo
*,
body {
padding: 0;
margin: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
}
.menu {
background: #afafaf;
}
ul {
border: 1px solid green;
}
li {
display: inline-block;
}
.content {
height: 300px;
}
<div class="menu">
<div class="container">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">It's me, Mario!</div>
</div>
2nd Option
Use a pseudo-element
*,
body {
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
height: 300px;
}
ul {
background: #afafaf;
position: relative;
border: 1px solid green;
}
ul:before {
content: '';
position: absolute;
height: 100%;
background: inherit;
width: 100vw;
left: 50%;
transform: translateX(-50%);
z-index: -1
}
li {
display: inline-block;
}
<div class="container">
<div class="menu">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
<div class="content">It's me, Mario!</div>
</div>
JSfiddle Demo
if in .container you change
width:50%;
to
width:100%;
it will do it
fiddle
you could also use the .menu-wrap class (which I've seen in your markup) to do this