This question already has answers here:
Proper use of flex properties when nesting flex containers
(1 answer)
How do I render <li> side-by-side?
(9 answers)
Closed 8 days ago.
I am unable to align li items inside a div side by side using flex.
All the links appears vertically but I want them to be horizontally.
.provinces {
margin-top: 20px;
}
.provinces-header h3 {
text-align: center;
}
.provinces-items {
display: flex;
}
.provinces-items ul li a {
display: inline-block;
text-decoration: none;
justify-content: space-between;
align-items: center;
padding: 10px 8%;
}
<div class="provinces">
<div class="provinces-header">
<h3>Provinces</h3>
</div>
<div class="provinces-items">
<ul>
<li>Ontario</li>
<li>British Columbia</li>
<li>Alberta</li>
<li>Manitoba</li>
<li>Nova Scotia</li>
<li>Saskatchewan</li>
</ul>
</div>
</div>
update your CSS to :
.provinces {
margin-top: 20px;
}
.provinces-header h3 {
text-align: center;
}
.provinces-items ul{
display: flex;
align-items: center;
gap: 2rem;
}
.provinces-items ul li a {
display: inline-block;
text-decoration: none;
justify-content: space-between;
align-items: center;
}
You have mistaken the class for the list
.provinces-items {
display: flex;
}
should be
.provinces-items ul {
display: flex;
}
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How to center a button within a div?
(16 answers)
Closed 5 months ago.
I have the following code in index.html
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
Flex works in all elements except for the <button> element. It doesn't center it. Why is that?
Most browsers display button elements as inline-block by default, so, it won't occupy 100% of parent's width. If you apply width 100% it will center the text, just like h1, h2. If you want to center the button itself you can use margin: 0 auto; property.
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
width: 100%;
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
add to your button class margin-left: auto; margin-right:auto;
should look like that
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
For your problem you need to read this article:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You should add
margin: auto;
display: block;
to #increment-btn style.
Other solution is to add a div parent element to the button and add flex style there:
display: flex;
justify-content: center;
I made a codepen for you: https://codepen.io/kovtib/pen/vYjgXrP
h1 {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
justify-content: center;
}
#count-el {
font-size: 50px;
display: flex;
justify-content: center;
}
#increment-btn {
background: red;
color: white;
font-size: 40px;
display: flex;
justify-content: center;
margin-inline: auto;
}
<h1>People entered:</h1>
<h2 id="count-el">0</h2>
<button id="increment-btn">Increment</button>
Add margin-inline: auto to your button styles.
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;
}
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
.heading {
text-align: center;
display: inline;
}
.button {
display: inline-block;
background-color: black;
color: white;
}
<div>
<h1 class="heading">Heading</h1>
<button class="button">button</button>
</div>
Use float:right to align button at the right position, and text-align in the parent div to make heading text at the center.
.headBar {
background-color: #828282;
text-align: center;
}
.heading {
display: inline;
}
.button {
display: inline-block;
background-color: black;
color: white;
float: right;
right: 10px;
top: 10px;
position: relative;
}
<div class="headBar">
<h1 class="heading">Heading</h1>
<button class="button">button</button>
</div>
Have you tried:
div {
display: flex;
flex-flow: wrap row;
justify-content: center;
align-items: center;
width: 90vw;
}
button {
justify-self: flex-end;
}
** it’s possible the button needs “align-self: flex-end;” instead
*** I assume this is just because it’s on stack overflow but try to give classnames that are different then the element name. If you must even btn is different-ish.
**** this is off my phone so I haven’t tested the code but it should work
You can do this by text-align: center; to div instead of .heading and float: right; to .button as follows:
div{
text-align: center;
}
.heading {
display: inline;
}
.button {
display: inline-block;
background-color: black;
color: white;
float: right;
}
<div>
<h1 class="heading">Heading</h1>
<button class="button">button</button>
</div>
You must use float right to align the button in same line as that of Heading.And for aligning the button to center you must include text-align:center in the enclosing div rather than in the heading class. The below code solves your issue.
.new{
text-align: center;
}
.heading {
display: inline;
}
.button {
display: inline-block;
background-color: black;
color: white;
float:right;
}
<div class="new">
<h1 class="heading">Heading</h1>
<button class="button">button</button>
<div>
I'm trying to create this top header using flexbox.
Basically I would like to center the <div class="header-title"> (Institution institution 1) on the line with the 3 other elements you see. (Institutioner, Ledere and Log ud) like you see on the image.
.nav {
background: #e1e1e1;
}
ol, ul {
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.header-title {
justify-content: center;
align-self: center;
display: flex;
}
.nav ul li.logout {
margin-left: auto;
}
.nav ul li a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}
<div class="nav mobilenav">
<div class="header-title">
Institution institution 1
</div>
<ul>
<li>Institutioner</li>
<li>
Ledere
</li>
<li class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</li>
</ul>
</div>
Demo - JSFiddle
Use nested flex containers and flex-grow: 1.
This allows you to create three equal-width sections on the nav bar.
Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.
Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).
.nav {
display: flex;
height: 50px; /* optional; just for demo */
background: white;
}
.links {
flex: 1; /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
display: flex;
justify-content: flex-start;
align-items: center;
border: 1px dashed red;
}
.header-title {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
border: 1px dashed red;
}
.logout {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
border: 1px dashed red;
}
.links a {
margin: 0 5px;
text-decoration: none;
}
<div class="nav mobilenav">
<div class="links">
Institutioner
Ledere
</div>
<div class="header-title">Institution institution 1</div>
<div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>
</div>
jsFiddle
Use justify-content: space-between; like this:
.container {
display: flex;
justify-content: space-between;
}
<div class="container">
<div>A</div>
<div>B</div>
<div>C</div>
</div>
Css grid will do this better than flexbox.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
}
button {
display: inline-block;
}
.short-content {
margin-left: auto;
}
<div class="grid">
<div class="long-content">
This has content that is fairly long
</div>
<button>CTA Button</button>
<div class="short-content">
Small Text
</div>
</div>
Here is a Flex solution that aligns the right and left containers while centering the middle container correctly.
.header-box {
width: 100%;
display: flex;
flex-flow: row wrap;
padding-top: 50px;
}
.left-header, .center-header, .right-header {
flex: 100px; /* adjust width if needed */
}
.header-box div:nth-of-type(1) {
text-align: left;
}
.header-box div:nth-of-type(2) {
align-self: center;
text-align: center;
}
.header-box div:nth-of-type(3) {
text-align: right;
}
<div class="header-box">
<div class="left-header">Left<br>header<br>content</div>
<div class="center-header">Center<br>header<br>content</div>
<div class="right-header">Right<br>header<br>content</div>
</div>
If you are open to changing your html, you need to put all the items in your header on the same level in the DOM.
Here's a working example
.nav {
background: #e1e1e1;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
.nav > div {
min-width: 0;
white-space: nowrap;
}
.header-title {
flex-basis: 80%;
text-align: center;
}
.nav div a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}
<div class="nav mobilenav">
<div>Institutioner</div>
<div>Ledere</div>
<div class="header-title">
Institution institution 1
</div>
<div class="logout">
<a class="button-dark" href="/user/logout">Log ud</a>
</div>
</div>
I'd like to move my <h1> element in flex-start direction, so I used align-self to override the initial direction, but didn't work.
HTML:
<div class="container">
<h1>Logo</h1>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
CSS:
.container {
background: deepskyblue;
display: flex;
justify-content: flex-end;
flex-direction: row;
}
.container h1 {
align-self: flex-start;
}
.navigation {
display: flex;
list-style: none;
}
.navigation a {
color: white;
padding: 1rem;
text-decoration: none;
display: inline-block;
}
.navigation a:hover {
background-color: red;
}
CodePen
If you want the <h1> aligned at start you want to set the justify-content property of its' parent to space-between. You don't need align-self on <h1>:
.container {
background: deepskyblue;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.container h1 {
color: white;
}
Updated pen.