I am relatively new to web design and had a question regarding centering and height I was hoping anyone could answer.
I am trying to center a box in a box using CSS. I previously used the CSS code snippet on another page (the part between the "THIS PART" comments, see below) and assumed I would have to put it under the #outer #inner{ part since the inner box is what I want to center. This did not work so I randomly put it in the #outer part and it worked. I'm unsure why and hoped someone could explain to me the reasoning :)
Also, currently I have a background picture and the 2 boxes on my page and when I shrink the page, everything shrinks as well. I assume it is because everything is in percentages. How would I go about making it so when I minimize the screen, everything stays in place and scrollbars appear? I'm having a difficult time finding another question on this site similar.
Please answer whatever you can, any help is appreciated! Thank you so much :)
html{
height: 97%;
}
body{
background-image: url("Pic.png");
background-size: cover;
height: 100%;
}
#outer{
border-style: solid;
border-color: green;
height: 99%;
width: 40%;
/*THIS PART: START*/
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
/*THIS PART: END*/
}
#outer #inner{
position: relative;
background-color: red;
height: 30%;
width: 50%;
/*Why doesn't the code from above in #outer go here?*/
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link href = "intro.css" type = "text/css" rel = "stylesheet">
</head>
<body>
<div id = "outer">
<h1>Outer</h1>
<div id = "inner">
<h1>Inner</h1>
</div>
</div>
</body>
</html>
To start using the Flexbox model, you need to first define a
flex container.
The flex-wrap property specifies whether the flex items
should wrap or not.
Note: The properties applied to the container are applied to the view of its items.
For reference :
https://www.w3schools.com/css/css3_flexbox.asp
For the case of shirinking problem use px or vh/vw
For reference : https://www.youtube.com/watch?v=__KNqdpqji0
It worked because the part
display: flex;
flex-flow: column wrap;
align-items: center;
justify-content: center;
affects the inside of the element and not on itself. I am guessing you were expecting the #outer #inner to align itself by these lines, but wasn't working.
As for the shrinking problem, I would suggest using pixels or vh/vw instead of percentages
Hope this clears your doubts!
Related
I'm having some behavior with HTML and CSS that I don't understand and I'm hoping that someone could elucidate it: https://jsfiddle.net/kufd2x96/1/:
<!DOCTYPE html>
<html>
<head>
<style>
#fixedDiv{
position: fixed;
top: 32px;
left: 0px;
height: calc(100vw - 32px);
background-color: blue;
display: flex;
flex-direction: column;
}
#bigSomething{
overflow-y: auto;
background-color: green;
flex-grow: 1;
}
</style>
</head>
<body style="display: flex; justify-content: center;">
<div id="fixedDiv">
<div>
Small Something
</div>
<div id="bigSomething">
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>v
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>v
Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>Something<br>v
</div>
</div>
</body>
</html>
What I expect to happen and why:
In this MCVE, since #fixedDiv is set to have a height that brings it exactly to the bottom of the page, since flexbox (I thought, I saw a few SO answers that claimed as much) guarantees that the internal elements won't grow any larger than their container, and since #bigSometing has overflow-y: auto; I expect everything to stay on screen and for #bigContent to get a scrollbar so everything is accessible.
What actually happens:
Instead, #bigContent grows to well beyond the bottom of the screen, but to a seemingly random height since it doesn't grow far enough to contain its entire contents (as can be inferred from the fact that a functional scrollbar is present).
The Question:
Why is this code not behaving how I expect it to, where #bigContent's area is entirely on the screen and where it gets a scrollbar, and how can I fix it?
I found the issue: I had vw when I should have had vh, so the calculation was based on the width of the page, as if the width were the height.
I try to make site content vertically centered with display: flex; align-items: center; on normal mode. But if content changes and centered element height goes longer than window, it should behave like normal as align-items: flex-start;.
Use-case is that and I will share a sample fiddle belove with you.
Actual problem is that I should not use javascript on this issue, it should be solved by pure CSS code. (I added javascript to just show you how to increase content and see problem.)
If you try to click button on fiddle it will demonstrate my issue click more and see overflow is not run well and you can not see top elements. I need a clever option to make run this, thank you for helping.
html:
<div id="box">
<div>
<button id='click'>
click me
</button>
</div>
</div>
css:
html,body{
min-height:100%;
height:100%
}
#box {
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
#box div {
background:tomato;
width: 100px;
height: auto;
}
javascript:
document.addEventListener("click", function(){
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("box").children[0].appendChild(para);
});
let me show real-life sample images and then share fiddle to make it more cleaner.
normal mode:
long content mode:
jsfiddle:
link
as it is shown on this image overflow is not true also, it shows top but it is not top of the window.
I'm not sure if this will work for your requirements, but you need to start by changing the direction of the flexbox (you are using the default flex-direction: row but you'll need to switch to flex-direction: column). This will allow you to really take advantage of the dynamic sizing nature of flexboxes in the way that you need.
Since you are switching the orientation of the flexbox, you'll also need to switch your align-items and justify-content values. Since the effect you want is to end up with is justify-content: flex-start, go ahead and switch that now. You'll simulated justify-content: center with some placeholder elements.
Once you are using the flexbox vertically, you can then put in some placeholders that will shrink as the actual content grows. Put an empty div with this placeholder class above an below the actual content. The placeholder class then needs to be styled so that it can only shrink using flex-grow: 0 and flex-shrink: 1 (this works best if all other elements have flex-shrink: 0). It will also need to be styled with an initial height (I used height: 50vh but that might vary based on your needs).
With the flex-direction switched and the placeholders added, the last thing you need to do is set a height or max-height on the flexbox so that the placeholders will actually shrink. I recommend using height: 100vh but you can use something different based on the needs of your project.
Here's the end result (based on your sample code). I've made a few other tweaks (like setting the background on the placeholder) that are pretty specific to the example code and likely not what you need for your actual solution. I also eliminated some unnecessary code (like the styling on the HTML and body).
document.addEventListener("click", function() {
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("box").children[1].appendChild(para);
});
#box {
display: flex;
align-items: center;
justify-content: flex-start;
flex-direction: column;
height: 100vh;
overflow: auto;
}
#box>* {
background: tomato;
width: 100px;
margin: 0;
flex-grow: 1;
flex-shrink: 0;
}
#box>.placeholder {
height: 50vh;
flex-grow: 0;
flex-shrink: 100;
background: none;
}
<div id="box">
<div class="placeholder"></div>
<div>
<button id='click'>
click me
</button>
</div>
<div class="placeholder"></div>
</div>
I solved this problem with javascript but I should not use javascript. I decided to do not use flex center on my project.
So I am sharing this javascript solution to help if someone has the same problem and can use javascript on his project.
document.addEventListener("click", function(){
var para = document.createElement("P");
para.innerHTML = "This is a paragraph.";
document.getElementById("box").children[0].appendChild(para);
var el=document.getElementById("box");
if(el.children[0].offsetHeight>document.body.offsetHeight){
el.style.height='auto';
}else{
el.style.height='100%';
}
});
fiddle
I have two div elements which I want to center within an 'li' element. I found out that this could be done by using a flex layout. My parent div has the following properties:
display: -webkit-flex;
justify-content: center;
align-items: center;
This works and the two child divs are centering within the 'li'. Those are an image and a text element. But the additional behaviour this has, is not what I want. When the screen is too small for one line text, it is overriding the image. It looks like the following:
The more I shrink the page, the more the image dissappears. Does anybody know how this comes and how I can fix it?
EDIT Currently I am finding out how to add a working code snippet. For now, I have an image with the content structure, maybe this helps a bit.
I fill the image using the following css code:
.img_info_icon_png {
background: url("adapter-images.png") no-repeat -432px -0px;
width: 24px;
height: 24px;
}
Although the width is set to '24px', it is changing within the browser.
EDIT The following url is pointing to an example with the same behaviour: https://jsfiddle.net/Lkpxhux0/
As the flex-shrink defaults to 1, it allows for the items to shrink when not fit its parent.
Add flex-shrink: 0 to the .img_info_icon_png rule.
.outer {
display: flex;
justify-content: center;
align-items: center;
}
.outer .image {
background: url(http://placehold.it/50/f00) no-repeat;
width: 24px;
height: 24px;
flex-shrink: 0;
}
<div class="outer">
<div class="image"></div>
<div class="text">
This is some text that should not overlap the left aligned image
</div>
</div>
No matter what I try, I cannot manage to find the proper CSS for the behaviour below:
A: Larger-than-window images show the upper left of the image and allow scrolling to see the rest of it.
(Important: the parent's DIV background is covered, but should be visible on images with transparency — even if you scroll.)
B: Smaller-than-window images are horizontally and vertically centered, the parent DIV covers the whole window.
Thanks for any help!
In order to center the smaller image inside the parent div, you can use display:flex for the parent div. Then set the justify-content and align-items to center. Here is a workaround,
#mydiv {
overflow: auto;
max-width: 500px;
max-height:500px;
}
.mainContainer{
width:500px;
height:500px;
background-color:#000;
display: flex;
justify-content: center;
align-items: center;
background-size:cover;
}
Replace the small image with this to check how it works with a large image.
<div class="mainContainer">
<div id='mydiv'>
<img src='https://i1.wp.com/www.rceshop.com/wp-content/uploads/2016/12/samples.png?fit=480%2C400' />
</div>
</div>
PS: Change the width and height of the parent div to the required screen size of yours. Hope this will help!
The line-height property turned out to be the base for solving the problem. Not sure if this is a hack, but it works.
.mainContainer {
text-align: center;
}
#mydiv {
line-height: 100vH;
margin: 0;
}
img {
vertical-align: middle;
}
I'm trying to Vertical centering picture on my page
i tried few scripts & styles but none of them worked
my page is:
TEST.esc.bugs3.com
I'm trying to Center the "Arrow" pic on the left & right sides to the center of the main pic
today all i get is the pic is always on the "TOP" of the DIV & i wish to put in in center
Note: I don't wanna use fix size as PX i wish to make it with 50%
like main pic is the 100% height and the arrow will be show on 50% of it
Layout - how i wish it will look like
thanks for the help :)
Edit:
thanks for the answers
but i need the side div (side box) to be Vertical centered to the main div (center box)
the main pic size is not fixed (every media will have different size - so i cant use PX as position
Use CSS3 Flexbox for modern Browsers: Here's Browser support for it.
.center-both{
display: flex;
justify-content: center;
align-items: center;
height: 350px;
background: LightSeaGreen;
}
Fiddle
Read this article for more on flexbox: http://dipaksblogonline.blogspot.in/2014/05/css-flexbox-explained-with-examples.html
If you want to support old browsers like IE7/IE8 then use display: table-cell; property to place the content vertically center.
Change the css for Sidepanel class as below
.SidePanel {
width: 5%;
height: auto;
float: left;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
Use This Code For Your Pic:
.pic{
position: absolute;
top: 50%;
margin-top: -(HEIGHT/2)
}
Which HEIGHT is Your Picture's height in Pixels.
Update 1
Your Container Should Have A Specific Height And Have A CSS Property: Position: (Relative|Absolute|Fixed)