I'm trying to align three things in a li with a border. A <h1> to the left, a <p> to the middle, and a <img> to the right. Currently I'm doing it using the CSS margin property, but since the elements change in width and height, that ends up looking good on some and worse on others:
The first looks bad, but the second one has wider elements and looks better.
Here is the relevant HTML code I'm currently using:
And CSS:
css
html,
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
#container{
display: block;
margin: 0 auto;
max-width: 40rem;
padding: 1rem;
}
#raidList{
list-style: none;
margin: 0;
}
#raidList li{
background: #ffffff;
border-radius: 0.5rem;
margin-top: 1rem;
min-height: calc(1rem + 96px);
margin: 1.75rem 0;
box-shadow: 0.25rem 0.25rem 0.6rem rgba(0,0,0,0.05), 0 0.5rem 1.125rem rgba(75,0,0,0.05);
display: flex;
align-content: center;
align-items: center;
flex-direction: row;
overflow: none;
text-align: center;
}
#raidList li img{
margin-left: calc(100% - (160px + 50%));
float: right;
}
#raidList li h1{
margin: 30px;
font-size: 50px;
float: left;
}
#raidList li p{
margin-left: calc(50% - 160px);
}
#raidList li > *{
position: relative;
}```
How can I fix this? Keep in mind that it's a li and not a div. Thanks!
this is what i have changed to make it work as you want:
.container{
display: block;
margin: 0 auto;
justify-content: center;
align-items: center;
}
.raidList{
position: absolute;
display: flex;
justify-content: center;
width: 100%;
list-style: none;
margin: 0;
}
.raidList li{
position: absolute;
width: 40%;
background: #ffffff;
border-radius: 0.5rem;
margin-top: 1rem;
min-height: calc(1rem + 96px);
margin: 1.75rem 0;
box-shadow: 0.25rem 0.25rem 0.6rem rgba(0,0,0,0.05), 0 0.5rem 1.125rem rgba(75,0,0,0.05);
display: flex;
justify-content: center;
align-items: center;
overflow: none;
}
For your "li" try using justify-content instead of align-content and set it to center.
I also changed raidList to a display flex so it goes horizontally and so I can apply the justify-content to the center.
This works just fine, I may have changed some values such as width or heigth but you can vary those as you like.
You can add as many elements as you want, the "li" will justify them.
Hope it helps ;)
This is the sort of layout that flexbox is made for -
simply apply display: flex to the li - and align-items:center- to vertically center everything and then justify-content: space-between to space them out horizontally
That said - you really shouldn't be using a h1 on every row - h1s are intended to be the top level heading and indicate the highest level of content heading for the page.
ul {
padding: 0;
margin:0;
list-style: none;
}
h1 {
margin: 0;
}
.flex-container {
padding: 16px 0;
display: flex;
align-items: center;
justify-content: space-between;
}
li{
border-bottom: solid 1px red;
}
<ul>
<li class="flex-container">
<h1>left content</h1>
<p>middle content</p>
<span>right content</span>
</li>
<li class="flex-container">
<h1>left content</h1>
<p>middle content</p>
<span>right content</span>
</li>
<li class="flex-container">
<h1>left content</h1>
<p>middle content</p>
<span>right content</span>
</li>
</ul>
Related
I would like to center something in my code with flexbox. It works for all other elements, only here something seems to be wrong.
Does anyone have an idea?
.answer {
text-shadow: 0 0 2px gr;
display: flex;
justify-content: center;
border-radius: 5px;
margin-bottom: 20px;
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
This is how it gets displayed in my live server
You can add body tag on css to make center on the page
to make horizontal center
body {
display: flex,
justify-content: center
}
or make vertical center
body {
display: flex,
align-items: center,
height: 100vh /* This is for full height of your screen */
}
or make horizontal and vertical center
body {
display: flex,
justify-content: center,
align-items: center,
height: 100vh
}
Your "Answer" is centered in the box. Are you trying to center the box on the page? In that case, you would need to apply flex styles to the parent. In this case, the body:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.answer {
text-shadow: 0 0 2px gr;
display: flex;
justify-content: center;
border-radius: 5px;
margin-bottom: 20px;
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0px; /*add to remove body margin which always present and makes v-scroll if not removed*/
}
.answer {
display: flex;
justify-content: center;
margin-bottom: 20px; /*Remove it if their is no other content on page*/
padding: 20px;
border: 5px solid black;
border-radius: 5px;
width: 50%;
}
<section class="answer">
<p>Answer</p>
</section>
I have problem with my CSS of navigation bar. I want to align items to the center of purple div, but there are spaces between texts. How I can achieve alignment without these spaces?
Screen:
Code:
<div class="navbar">
<h1 class="logo">ab</h1>
<p class="items">O nás</p>
<p class="items">Reference</p>
<p class="items">Blog</p>
</div>
<style>
.navbar{
margin: 30px;
padding: 10px;
height: 100px;
background: red;
display: flex;
}
.navbar .logo{
font-size: 50px;
}
.navbar .items{
float: left;
display: flex;
flex-grow: 1;
justify-content:center;
background: blueviolet;
align-items: center;
}
</style>
The flex-box always takes as much space as it needs to fill the box.
All your p.items are flex and the covered div is also flex.
The p has flex-grow: 1 so they will have the same width inside the covered div.
The solution to this problem is create another div to cover all your items and remove display: flex and flex-grow: 1 from your items class, so the spaces between your text will be removed.
<div class="navbar">
<h1 class="logo">ab</h1>
<div class="d-flex">
<p class="items">O nás</p>
<p class="items">Reference</p>
<p class="items">Blog</p>
</div>
</div>
<style>
.navbar{
margin: 30px;
padding: 10px;
height: 100px;
background: red;
display: flex;
}
.navbar .logo{
font-size: 50px;
}
.navbar .d-flex {
display: flex;
flex-grow: 1;
background: blueviolet;
justify-content: center;
align-items: center;
}
.navbar .items{
margin: 0 10px;
}
</style>
Here below is my css and html code I try hard to make justify-content: space-between; but not working
the class .container is important I can't remove max-width, is there any solution to fix the problem I also use flex:auto , flex:0 0 auto to shrink or give adjustable space to the elements but nothing works for me
Any help is highly appreciated
.mega-wrap {
position: relative;
margin: 35px auto;
overflow: hidden;
}
.mega-wrap .container {
display: flex;
align-items: center;
justify-content: space-between;
align-content: center;
margin: 0 auto;
}
.container {
width: 100%;
max-width: 1145px;
margin: 0 auto;
padding: 0px;
box-sizing: border-box;
}
.dual-wrapper,
.max-wrapper {
position: relative;
display: block;
background: red;
color: #fff;
width: 50%;
overflow: hidden;
margin: 0 auto;
}
<div class="mega-wrap">
<div class="container">
<div class="dual-wrapper">
Example 1
</div>
<div class="max-wrapper">
Example 2
</div>
</div>
</div>
To avoid any confusion, I removed all your CSS code and tried to match with what you want.
.container {
background: red;
color: white;
display: flex;
justify-content: center;
}
.dual-wrapper, .max-wrapper {
display: inline-block;
padding-left: 1rem;
padding-right: 1rem;
}
<div class="container">
<div class="dual-wrapper">
Example 1
</div>
<div class="max-wrapper">
Example 2
</div>
</div>
Does anyone know how to align an <hr> element inside a flex-container. When I do flex-start all of the other elements align, apart from the <hr>. I need a solution that doesn't use position: absolute on the <hr> element because this affects the document flow and causes other issues.
codepen: https://codepen.io/emilychews/pen/QaPQaW
CSS
body {margin: 0; padding: 0;}
.box {
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
display: block;
background: white;
height: 3px;
width: 75px;
margin-left: 0 auto;
}
HTML
<div class="box">
<h1> Hello </h1>
<hr>
<p> Thanks </p>
</div>
The hr element has a default margin set, and in Chrome it is set to:
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
And as auto margin's in Flexbox override the justify-content/align-* properties, you need to remove it, which e.g. margin: 0; will, and make the in this case align-items: flex-start; be properly applied.
Stack snippet
body {margin: 0; padding: 0;}
.box {
color: white;
width: 300px;
height: 300px;
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
hr {
position: relative;
background: white;
height: 3px;
width: 75px;
align-self: flex-start;
margin: 0; /* added */
}
<div class="box">
<h1>Hello</h1>
<hr>
<p>Thanks</p>
</div>
Change your hr to
background: white;
height: 3px;
width: 75px;
margin-left: 0;
I'm using flexbox to create a navigation menu and I want to make sure the text to the left and right of each word are exactly even.
Right now, the boxes are perfectly even responsively, but when the characters of the word don't match others, the space around the words are no longer even.
Here's my fiddle: https://jsfiddle.net/omarel/p204jjnr/2/
header {
display: flex;
position: fixed;
bottom: 0px;
width: 100%;
background-color: #000;
padding: 50px;
}
header .tab {
color: #fff;
width: 16.66%;
height: 70px;
border: 1px solid red;
text-align: center;
font-size: 2.4vw;
vertical-align: middle;
line-height: 70px;
}
/* BORDER BOXING */
header,
header .tab {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<header>
<div class="tab">home</div>
<div class="tab">hello</div>
<div class="tab">longer word</div>
<div class="tab">short</div>
<div class="tab">Neighborhood</div>
<div class="tab">Floor Plans</div>
<div class="tab">Views</div>
</header>
UPDATE:
The solution was a combination of answers below:
Both adding flex:auto and removing the width from header .tab
For flexbox you use the flex property to specify your elements length. Look into flex-basis, flex-shrink, and flex-grow. Remove the width and set your flex to auto;
header .tab{
color: #fff;
flex: auto;
height: 70px;
border: 1px solid red;
text-align: center;
font-size: 2.4vw;
vertical-align: middle;
line-height: 70px;
}
Instead of setting a width for each item:
width: 16.66%
Let the width be auto (content-based) and use padding:
width: 16.66% <-- REMOVE
padding: 0 20px
Now, the space to the left and right of the text is consistent in all tabs.
Here's a simplified version of your code:
header {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
background-color: #000;
padding: 50px;
}
header .tab {
padding: 0 20px;
height: 70px;
font-size: 2.4vw;
color: #fff;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
<header>
<div class="tab">home</div>
<div class="tab">hello</div>
<div class="tab">longer word</div>
<div class="tab">short</div>
<div class="tab">Neighborhood</div>
<div class="tab">Floor Plans</div>
<div class="tab">Views</div>
</header>
jsFiddle