This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 4 years ago.
Using flexbox I'm trying to create a fixed header that includes only two elements and these elements are as far away from each other as possible. I cannot seem to get this to work with justify-content: space-between.
I expected this CSS code to work but the elements are just sitting next to each other.
header {
width: 100%;
position: fixed;
display: flex;
align-content: space-between;
}
<header>
<a>
LOGO
</a>
<a>
MENU
</a>
</header>
You almost had it. Use justify-content, not align-content.
Edit: As a commenter pointed out, left: 0 is needed as well to truly keep each flex child pinned to their respective corners. Another option to beat the default browser margins would be to instead add html, body { margin: 0; }.
header {
display: flex;
width: 100%;
position: fixed;
left: 0;
justify-content: space-between;
}
<header>
<a>
LOGO
</a>
<a>
MENU
</a>
</header>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed last month.
What I want to do is to use <p onclick='this.innerHTML++'>0</p> and make this code have a black background that covers the whole screen and center the text in it. I want it to not have a body element or an html element as I just want the <p> element.
I tried using box-shadows and the transform property in the style attribute.
<p onclick='this.innerHTML++' style='color: white; width: 100vw; height: 100vh; transform: translate(-50vw, -50vh); box-shadow: 50vw 50vh black;'>0</p>
That just displayed a quarter of the viewport a fourth of whiteness which meant the box-shadow wasn't working. I found it added a margin, so I removed it. It still didn't work. It centered the text though. I know how to do it with 2 elements, but I want to keep the code with only the <p> element.
This time I tried using the background property.
<p onclick='this.innerHTML++' style='color: white; width: 100vw; height: 100vh; background: black; text-align: center'>0</p>
This time the code did everything correctly except positioning the text vertically centered.
Is it possible to do this all in 1 element, center the text both horizontally and vertically, and display a black background that covers the whole screen?
To center content you can either use flex or grid:
display: flex;
justify-content: center;
align-items: center;
or with grid, it's just two lines:
display: grid;
place-content: center;
I created a snippet for you. I changed your <p> tag to a button, since this would be more semantic valid HTML. You can of course use any element you like.
button {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: grid;
place-content: center;
font-size: 3rem;
color: #fff;
background-color: rebeccapurple;
}
<button onclick="this.innerHTML++" type="button">0</button>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
This question is about understanding how flex effect the display of child elements. The centering is peripheral and not the point of the question. Please see comments below if the question does not make sense.
From my reading of how flex works it should do the opposite and make the child elements behave like block elements.
However, in this minimal example it makes the paragraph element behave like an inline element.
I am using flex to center content.
<style>
/* display flex should cause child elments to behave like block elements
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/
#wrapper{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#image{
margin: 0px;
border: 1px dotted #888888;
}
#percentage{
margin: 0px;
font-size: 40px;
font-weight: bold;
border: 1px dotted #888888;
}
</style>
<div id="wrapper" >
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" alt="wikimedia" width="128" height="128">
<p id="percentage"> 10%</p>
</div>
Basically, flexbox has a default flex-direction of row that's why the elements are inline, to make them appear on like block elements you can set flex-direction to column.
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I know this question has been asked to death but I can't seem to make any of the solutions work. Please be sympathetic, I have been trying for days!
I want to vertically centre everything in the header element at the centre of its height. Eventually I plan on heaving a little logo, title and navigation links in the header. While the logo and title are floated to left, the navigation links need to stay floated to the right.
Why is vertical alignment made SO HARD in html/css!
I'd prefer a solution that does what I want directly and not consequently by fixing/padding/adjusting things around the elements but if that is the only way then fine. Here is what I have so far.
* {
border: 1px solid black
}
header h1 {
display: inline;
}
header nav {
display: inline;
float: right;
}
<header id='header'>
<h1>Obla Di Obla Da</h1>
<nav id="nav">
Evil |
Not Yet Evil
</nav>
</header>
Floats and inline elements are a nightmare when it comes to the vertical axis. You should take a look at using Flexbox - it really excels with intra-element positioning - namely its align-items: center property value (assuming you're using a flex row and not a flex column at which point you'll want justify-content: center)
Take a look at this snippet
* {
border: 1px solid black
}
#header {
background: #0095ee;
color: #fff;
}
.flex {
display: flex;
}
.align-center {
align-items: center;
}
.space-between {
justify-content: space-between;
}
<header id='header' class="flex align-center space-between">
<h1>Obla Di Obla Da</h1>
<nav id="nav">
Evil |
Not Yet Evil
</nav>
</header>
The other way that you see quite a bit is to use an absolute position on a a child, set the top to 50%, and set it's transform X translation to -50%, though this is less common now, due to the expanse and ease-of-use of flex, and the inherent issues that come with removing elements from the document flow.
.parent { position: relative; }
.vertical-child {
position: absolute;
top: 50%;
transform: translateX( -50% );
}
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertically align text next to an image?
(26 answers)
Flexbox: center horizontally and vertically
(14 answers)
How do I vertically align text in a div?
(34 answers)
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 4 years ago.
I am trying to center align a span inside a div, which also contains an img element.
.element {
display: inline-block;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
or see this fiddle
However the text wont vertical align. I have looked primary at this question. However vertical-align: middle does nothing here.
I also looked at this question. However I will rather avoid anything position: relative & position: absolute workarounds for this. I also tried messing the line-height with no luck.
I even tried to set height: 100%on the span, as this question suggests, but that does nothing either.
I basically looked at bunch of questions here on SO, it seems like css is so weird about this, that there basically is 12 approaches for a simple thing like this. Yet I can't seem to get 1 of them to work in my occasion.
What is up with this behavior?
EDIT:
Marked as duplicate to How to Vertical align elements in a div? - I have explained that these solutions with line-height and vertical align doesn't work in my case as explained in the original question. The accepted solution did not work in this case. How is it a duplicate?
The answer here is probably to use flexbox. If your flex-direction is row (which is default), you can use align-items to center the elements vertically and justify-content to justify the row to the left (the "start" of the flex container). Let me know if you have any questions!
.element {
align-items: center;
display: flex;
justify-content: flex-start;
}
.element img {
height: 40px;
width: 40px;
border-radius: 50%;
margin-right: 20px;
}
.element span {
display: inline-block;
}
<div class="element">
<img src="https://images.pexels.com/photos/35646/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<span>hello</span>
</div>
Use flexbox for this. Sample:
.element {
display: flex;
align-items: center;
}
Use align-items: center for vertical align and justify-content: center; if you need also horizontal align center.
This question already has answers here:
How to align flexbox columns left and right?
(5 answers)
Closed 5 years ago.
My goal is simple, stick the p tag to the right side of the custom css card, to make it stick to the left it is pretty straightforward.
custom-text {
margin-left: 30px;
}
To better illustrate this
The question is how do I make the $100 dollars always stick to the right?
and let say the value of the dollars change to $5, how to make it always on the right?
I can just use
custom-text-right {
margin-left: 450px;
}
but this solution doesn't scale to different value (Im using bootstrap just for your information)
HTML part:
<h4>Price: <span class="dollar">$3.15</span></h4>
you can do that using flexbox, with justify-content: space-between;
.card {
display: flex;
height: 500px;
width: 500px;
background: #000;
justify-content: space-between;
color: white;
padding: 30px;
box-sizing: border-box
}
<div class="card">
<span>Price:</span>
<span> $100</span>
</div>
You can use float: right or text-align:right