I'm trying to center a text in the middle of my screen. For some reason it doesn't work. Can someone please take a look at the following index.html and explain to me what I am doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.header {
display: flex;
background-color: black;
padding: 2rem;
}
.outer-container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
}
.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
justify-content: center;
}
span {
padding: .5rem;
}
</style>
</head>
<body>
<div class="parent-container">
<div class="header">Header</div>
<div class="outer-container">
<div class="inner-container">
<h1>HEADING</h1>
<span>Some text here.</span>
</div>
</div>
</div>
</body>
</html>
I was thinking that the flex-layout fills all available space. Since my flex-direction is "column", I was expecting the outer container to fill the entire height of my screen, but apparently that's not the case.
Update:
I have now placed my outer-container and the inner-container inside a parent-container to showcase the issue I have when setting the height of the outer-container to 100vh: As you can see, the issue is that a height of 100vh for my outer-container is now too much - the correct height would be 100vh minus the height of the header.
add justify-content: center; on both containers
Your container does not take all screen height and vertical alignment is missing. Here is codepen https://codepen.io/ignasb/pen/KKBQzjQ with vertical and horizontal alignment. I added height and alignment css properties
.outer-container {
height: 100vh;
justify-content: center;
display: flex;
flex-direction: column;
}
Also you might want additional styles if that scrollbar appears.
body {
margin: 0;
}
The quick and dirty solution is to make the containing parent, body, .outer-container or some .wrapper, fill the full viewport with height: 100% or 100vh, eventually subtract heights of other elements in the same container and use below CSS to center its content.
display: grid; place-items: center;
snippet
/* Make sure padding/border size are part of element size */
* { box-sizing: border-box }
body { margin: 0 } /* remove default space, causes overflow */
.parent-container {
display: flex;
flex-direction: column;
height: 100vh; /* would cause overflow with body margin */
}
/* Takes space from .parent-container */
.header {
display: flex;
background-color: black;
padding: 2rem;
}
.outer-container {
flex: 1; /* Stretch to fill available space */
display: grid; place-items: center; /* Easy centering demo */
}
.inner-container {
display: flex;
flex-direction: column;
align-items: center;
cursor: default;
justify-content: center;
}
span {
padding: .5rem;
}
<div class="parent-container">
<div class="header">Header</div>
<div class="outer-container">
<div class="inner-container">
<h1>HEADING</h1>
<span>Some text here.</span>
</div>
</div>
</div>
Related
I have the following html tree:
div with padding: 2rem 1.25rem;
div with max-width: none so that it overflows past the screen's width
The padding is applied correctly on the top, bottom and left side, but not on the right.
I know what's the problem but I'm not sure how to solve it. The parent div has a width of 375px, which is the screen's width, whereas the child div has 890px. How can I make the parent expand like the child?
There are a few other ancestors for the parent div above. Do I need to make all of them expand?
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
display: flex;
flex-flow: row nowrap;
padding: 2rem 1.25rem;
}
.child {
background-color: #f5f8ff;
border: 1px solid #eff5f5;
display: flex;
flex-flow: row nowrap;
min-width: 100vw;
}
.item {
align-items: center;
display: flex;
flex-flow: row nowrap;
justify-content: center;
height: 44px;
width: 256px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="item">Foo</div>
<div class="item">Bar</div>
<div class="item">Baz</div>
<div class="item">Qux</div>
</div>
</div>
</body>
</html>
Your question is very vague but if you want your parent div to just basically always be just big enough to house your child div. You can try setting your parent div to display: inline.
.parentdiv{
display: inline;
}
And by not setting a width. The parent div will always just be big enough to hold its children divs.
Hope this helps.
Give this a try:
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
display: flex;
flex-flow: row nowrap;
padding: 2rem 1.25rem;
}
.child {
background-color: #f5f8ff;
border: 1px solid #eff5f5;
display: flex;
flex-flow: row nowrap;
min-width: 100%;
}
.item {
text-align: center;
flex: 0 0 25%;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<div class="item">Foo</div>
<div class="item">Bar</div>
<div class="item">Baz</div>
<div class="item">Qux</div>
</div>
</div>
</body>
</html>
My page starts to change zoom and layout gets slightly messed up when I have a hardcoded width on items located in a Flexbox container (make a very narrow Chrome Devtools responsive window). The problem starts when I make my viewing area narrower than the 300px. Unfortunately, you can't see this problem when running this inside an iframe on jsfiddle - it has to be ran "on it's own", my html block needs to be THE top html block.
Here's the jsfiddle for reference still:
https://jsfiddle.net/elijahww/9e1u7ptr/
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#productShowcaseContainer {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
.contentContainer {
display: flex;
flex: 1;
}
#productShowcaseTitle {
height: 100px;
background-color: antiquewhite;
}
#productShowcaseThumbnailContainer {
flex: 1;
background-color: darkseagreen;
}
</style>
</head>
<body style="margin: 0;">
<div id="productShowcaseContainer">
<div id="productShowcaseTitle"></div>
<div class="contentContainer">
<div id="productShowcaseThumbnailContainer" style="padding: 10px;">
<input style="width:300px;">
</div>
</div>
</div>
</body></html>
I don't know how to make this work.
here is a gif:
This might be happening because you have hard-coded width of input field as 300px and trying to zoom screen width beyond this.
If you really want to have responsive layout then you should be using flex-layout properly and set flex-basis, flex-grow and flex-shrink property of each layout element.
These properties are responsible for handling responsive behaviour of flex-elements.
To Read more about flex layout follow this link Flex tutorial
One option is to give some parent container overflow-x: auto
body {
background-color: #3d5d6a;
}
#container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
.main-content-container {
display: flex;
flex: 1;
}
#top-header-container {
padding: 10px;
height: 100px;
background-color: antiquewhite;
/*align-content: stretch;*/
display: flex;
justify-content: stretch;
}
#main-content-inner {
flex: 1;
background-color: darkseagreen;
}
.responsive-table {
overflow-x: auto;
}
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="margin: 0;">
<div id="container">
<div id="top-header-container">
<div class="responsive-table">
<input style="width:400px;" value="hard coded to 400px">
</div>
</div>
<div class="main-content-container">
<div id="main-content-inner" style="padding: 10px;">
test
</div>
</div>
</div>
</body></html>
I have an element I'd like to be (cross-axis) centered but also 'grow' to a nominal size even with too-little content, BUT ALSO 'shrink' when the width of the page becomes smaller than 350px wide.
HTML
<div class="parent">
<div class="child">
Some content
</div>
</div>
SCSS
.parent {
display: flex;
flex-direction: column;
align-items: center;
.child {
max-width: 350px;
align-self: stretch;
}
}
Adding align-self: stretch; to .child does the job of making it 350px wide, but it seems to negate the align-items: center; in .parent
Is there a way to do this in CSS that I'm missing? Please note that the element can't just be 350px wide all the time - it must also respond to horizontal page resizing as it does in the example fiddle.
Fiddle: https://jsfiddle.net/1uqpxn8L/1/
UPDATED
I think you should use justify-content to h-align child to center.
Please note, when you apply display: flex property to parent, you should apply flex property to child.
.parent {
background: yellow;
display: flex;
flex-direction: column;
align-items: center;
}
.parent .child {
background: black;
color: white;
text-align: center;
flex: 1 1 auto;
width: 100%;
max-width: 350px;
}
<div class="parent">
<div class="child">
I should be 350px wide
<br> and centered in the yellow
<br> unless the page gets smaller,
<br> in which case I should have
<br> 10px padding on either side.
</div>
</div>
Please see the result here, hope this is what you mean: https://jsfiddle.net/1uqpxn8L/11/
You can do something like this.
HTML
<div class="parent">
<div class="child">
Some content
</div>
</div>
SCSS
.parent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
.child {
width: 350px;
#media(max-width: 350px) {
width: 100%;
}
}
}
.parent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
background-color: red;
}
.child {
width: 350px;
background-color: yellow;
}
#media(max-width: 350px) {
.child { width: 100%; }
}
<div class="parent">
<div class="child">
Some content
</div>
</div>
So whats happening is I'm using a media query to change the width of the child depending on the width of the browser.
You just need to remove the flex-direction property. Then it's working as you expected. But there will be a problem if you want to display children elements as column manner. The shrinking problem occurs with the flex-direction property or flex-flow:column values as I checked.
I'm using flexbox to make my footer stick to the bottom, and for the most part it's working. My problem is, I need the content to be within a specified width, that I set with max-width and center with margin-left:auto; and margin-right:auto;. When I activate flexbox, the contents are squished by the margin-left and margin-right rules, and do not take up the space defined by max-width. I would like to know why this is happening and how to get my footer to look how I want it to look.
Here is how I want my footer to look:
And here is how flexbox is affecting it:
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
max-width: 67.5rem;
margin-left: auto;
margin-right: auto;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1.875rem;
padding-top: 3.5rem;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>
If I change max-width to width then it works, but then when I test it in my browser using the device-mobile setting to see how it would look on a mobile device, the width property makes the footer too big and messes up the content. If I take out the margin-left and margin-right properties, then my footer looks like this:
As you can see it's no longer centered. I can't use the flex-basis property because that only affects the height of the footer. Please help.
Edit
Here is a snippet with margin-left and margin-right taken out and replaced with display:flex; and justify-content:space-around;. Be sure to click "Full page" to view with a larger viewport.
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
max-width: 67.5rem;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-bottom: 1.875rem;
padding-top: 3.5rem;
display: flex;
justify-content: space-around;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>
This can be done easily with justify-content: space-between;, but looking at your code I feel you may misunderstand a bit how Flexbox itself works. You want your footer to act as a flex container so you can manipulate the child spans as well.
Consider checking out freeCodeCamp's Flexbox Challenges to get a better idea how Flexbox works.
EDIT: CodePen now reflects what OP was meaning to immitate.
Here's a CodePen to play around with.
What this does is makes your footer both a child and container.
First your body becomes a container to allow the main content to grow to fill the space pushing your footer to the bottom of the page. The flex-direction is set to column to flow vertically.
You create a wrapper for your footer, because currently your footer is in the body container which is set to flex-direction:column; where in this case, you want the direction to be row to style horizontally. By default display:flex; will assume you wanted row so direction doesn't need declared. We then justify-content to the center so no matter the width the footer itself will be centered.
You treat your <footer> as both a child and container. As a child we tell it not to grow or shrink and set the basis to auto. As a container, we tell it to distribute space-between its children which allows a consistently equal amount of space between the left & right spans.
body {
display: flex;
height: 100%;
flex-direction: column;
}
.main {
flex: 1 0 auto;
border: 1px solid #000;
}
.wrapper {
display: flex;
justify-content: center;
}
footer {
flex: 0 0 auto;
display: flex;
margin: 1em;
width: 80%;
border: 1px solid #000;
justify-content: space-between;
}
<body>
<div class="main">
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
<h1>Hello Flex</h1>
<p>This is Flexbox</p>
</div>
</body>
<div class="wrapper">
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
</footer>
</div>
I gave up trying to get this to center with flexbox. Instead I used the calc function to calculate the padding-left and padding-right of my <footer> tag. Here is what I came up with (I'm using 47.5rem instead of 67.5rem because I think it's easier to see the behavior).
body {
display: flex;
flex-direction: column;
min-height: 100%;
}
div#content {
flex: 1 0 auto;
}
footer {
flex: 0 0 auto;
display: flex;
align-items: center;
padding-left: calc(((100vw - 47.5rem)/2) + 1.25rem);
padding-right: calc(((100vw - 47.5rem)/2) + 1.25rem);
padding-bottom: 1.875rem;
padding-top: 3.5rem;
}
#left {
flex: 1;
order: 1;
}
#mid {
flex: 0 0 auto;
order: 2;
}
#icons {
order: 3;
}
<body>
<header>...</header>
<div id="content">...</div>
<footer>
<span id="left">left text</span>
<span id="mid">right text url#mail</span>
<span id="icons">...</span>
</footer>
</body>
Following to this answer, I am trying to create a perfect height for my content, But the content height is overflowing instead of getting a scroll over content.
I have created a fiddle for this scenario. Please help me fix my content height such a way that top content and always visible and scroll-able downward.
fiddle
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
}
.box .row.content {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow-y: auto;
justify-content: center;
align-items: center;
}
.data {
width: 80%;
min-height: 400px;
}
.box .row.footer {
flex: 0 1 40px;
}
HTML.
<head>
<link href="./test.css" rel="stylesheet">
</head>
<body>
<div class="box">
<div class="row header">
<p>
<b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<div class="data">
invisible box1
</div>
<div class="data">
visible box2
</div>
<div class="data">
visible box3
</div>
<p>
<b>Bottom Box is visible with scroll.</b> (fills remaining space)
</p>
</div>
<div class="row footer">
<p>
<b>footer</b> (fixed height)</p>
</div>
</div>
</body>
</html>
The issue you encounter is caused by justify-content: center in the .box .row.content rule.
Remove it and your text will overflow properly.
.box .row.content {
display: flex;
flex-flow: column;
flex: 1 1 auto;
overflow-y: auto;
/*justify-content: center; removed */
align-items: center;
}
Updated fiddle
This is the default behavior for justify-content: center, where, on a flex column container, when the content overflow, it will overflow both at its top and bottom.
Read more here, where you find resources and a workaround:
How to use safe center with flexbox?
I think overflow: scroll; will fix your problem.