So i've got a modal div (set with z-index) that I'm trying to center vertically. The thing is I use it for not only one content but several ones, so the height is not fix. And while having a general "fix" (I'll explain in just after) of -150px in the margin-top generally works for short content, when having a lot of content, the div will start at mid-page and finish at the end (which is not what I want at all). Here is my code :
.modal
{
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
top: 50%;
margin-top: -150px;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
}
So here you can see the "fix". It works kind of well when the content is short :
It's pretty ugly when the content is big :
Does anyone have an idea of how to fix that ?
Thank you in advance
You could use this. Top 50% position the div on the 50% of the container y translate -50% is referred to his height and no the container:
.modal {
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
top: 50%;
transform: translateY(-50%);
-o-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
FIDDLE
Add the following css to center the div. note that this only works on position:absolute elements.
top: 0;
bottom:0;
margin-top: auto;
margin-bottom: auto;
So your css will become:
.modal
{
padding: 10px;
border: 1px black solid;
width: 80%;
position: absolute;
background: white;
left: 50%;
top: 0;
bottom:0;
margin-top: auto;
margin-bottom: auto;
margin-left: -40%;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
}
.modal{
padding: 10px;
border: 1px black solid;
width: 80%;
background: white;
z-index: 1000;
border-radius: 5px;
max-height: 80%;
overflow: scroll;
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin: auto;
}
Related
I am trying to create a popup card, but the card isn't getting vertically aligned. I've used the position: absolute; for positioning but the card is showing down at the bottom.
CSS(SASS)
.popup {
height: 100vw;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, 0.8);
z-index: 3000;
&__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 50%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
}
Popup is not fully implemented, I was checking where the element would show up.
This code is showing a white box down at the bottom instead of middle. Where I was hoping it to be.
HTML
<div class="popup">
<div class="popup__content">
</div>
</div>
The popup class is direct child of body just so it isn't influenced by any other classes. Anyone see where I might screwed up.
try this:
.popup {
height: 100vw;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba($color-black, 0.8);
z-index: 3000;
display:flex;
justify-content:center;
align-items:center;
&__content {
transform: translate(-50%, -50%);
width: 75%;
height: 50%;
background-color: $color-white;
box-shadow: 0 2rem 4rem rgba($color-black, 0.2);
border-radius: 3px;
display: table;
overflow: hidden;
}
Try using display: flex with justify-content, align-items rather than position: fixed.
It will be a constructive choice for a comfortable future in the future.
Please refer to the following URL through Google Translator. This site is well detailed.
https://heropy.blog/2018/11/24/css-flexible-box/
MDN: https://developer.mozilla.org/ko/docs/Web/CSS/flex
Use position: fixed; also for the child container (&__content). position: absolute; relates to he next higher ancestor with position: relative, so that night not be appropriate in every situation.
.popup {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: red;
z-index: 3000;
}
.popup__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
background-color: white;
box-shadow: 0 2rem 4rem green;
border-radius: 3px;
}
<div class="popup">
<div class="popup__content">
</div>
</div>
So how can I set an element's inner position fixed to middle of screen? I was able to set the x-axis of the div by using text-align: center;.
So how could I center the y-axis just like I did the x-axis? And if that can't be done, what new method must I use?
Code:
.fixed{
text-align: center;
width: 100%;
height: 100%;
padding: 0px;
position: fixed;
background-color: #00FF00;
top: 0px;
overflow: hidden;
z-index: 99;
}
.popup{
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72, 72, 72, 0.4);
margin-bottom: 50px;
margin-top: 20px;
}
<div class="fixed">
<div class="popup"></div>
</div>
I updated your fiddle. Just make your popup class position fix and make top,left,bottom,right = 0 then margin:auto. See this updated fiddle.
.popup{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
https://jsfiddle.net/norxpmbr/
For .popup, try replacing this:
margin-bottom: 50px;
margin-top: 20px;
With this:
position: relative;
top: 50%;
transform: translateY(-50%);
Source: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
So this is what I did to your code- removed the margins for popup and centered using transform and position: relative:
.popup{
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72,72,72,0.4);
margin : 0;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
revised fiddle
Snippet below:
.fixed {
text-align: center;
width: 100%;
padding: 0;
position: fixed;
background-color: #00FF00;
height: 100%;
top: 0;
overflow: hidden;
z-index: 99;
}
.popup {
display: inline-block;
width: 90%;
max-width: 900px;
min-height: 300px;
border: 2px solid rgba(72, 72, 72, 0.4);
margin: 0;
position: relative;
top: 50%;
transform: translate(0, -50%);
}
<div class="fixed">
<div class="popup">
</div>
</div>
Fiddle here
I have two separate labels I want to appear as one.
the CSS looks like this
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #e0b76d;
}
.label-main-first {
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 40%;
transform: translate(-40%, -50%);
border: 5px solid green;
border-right: none;
}
/*#a27f40*/
.label-main-second{
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 60%;
transform: translate(-60%, -50%);
border: 5px solid yellow;
border-left: none;
}
This creates a gap between the two labels.
Both labels has a width a 10%.
The first label is pushed 40% from the left, while the other label is pushed 60% from the right.
The difference is 20% which is the total width of both labels.
Why am I getting the gap between them?
The left value is the percentage of the wrapper (body in this case).
The percentage in translate is the percentage of its own width.
The second label starts at the middle, so it does not require X value for translate. transform: translate(0%, -50%);
The first label need to translate 100% of its width to the left. transform: translate(-100%, -50%);
The below code helps to align all in the center in properly.
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #e0b76d;
}
.label-main-first {
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 50%;
transform: translate(-100%, -50%);
border: 5px solid green;
border-right: none;
}
/*#a27f40*/
.label-main-second{
position: absolute;
width: 10%;
height: 10%;
top: 50%;
left: 50%;
transform: translate(0%, -50%);
border: 5px solid yellow;
border-left: none;
}
<label for="input-main" class="label-main-first"></label>
<label for="input-main" class="label-main-second"></label>
I am not sure over the goals that you have by using these style, but will suggest more one solution a bit simpler, https://jsfiddle.net/unb3n8s1/1/
hope it will work for your purposes also.
<div class="wrapper"><label for="input-main" class="label-main-first"></label>
<label for="input-main" class="label-main-second"></label></div>
you can change width, height and also set position absolute for wrapper, instead of each label.
Here is Variant with percents: https://jsfiddle.net/unb3n8s1/2/
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #e0b76d;
}
.wrapper {
width: 20%;
height: 10%;
position: absolute;
top: 45%;
left: 40%;
}
label {
display: block;
box-sizing: border-box;
float: left;
width: 50%;
height: 100%;
}
.label-main-first {
border: 5px solid green;
border-right: none;
}
/*#a27f40*/
.label-main-second{
border: 5px solid yellow;
border-left: none;
}
i think it's simply because the first label has left value of 40% and width of 10%
so the second label should have left value of 50% instead of 60%
I'm trying to create a "button" with 2 sections (each is 50% of the height of the div) separated by an horizontal bar. Each of the sections has centered text. The size of the button is going to be manipulated using javascript, and I'm trying to avoid also using javascript to position the elements inside the "button".
What I have so far is http://jsfiddle.net/u5u7d31p/2/, but i'm having a problem centering the horizontal bar. If I change the position of the separator to relative, the bar is centered, but then it changes the position of the bottom part of the text. I can also change the margin to a static value (margin: 0 63px;) to center it, but I would like to avoid it if there is an easier solution that doesn't require javascript.
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
Any ideas? Thanks.
All codes are ok. Just put this css below to .img_overlay .separator class.
Full code is below:
.img_overlay .separator {
position: absolute;
top: -1px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
right: 0;
}
view my demo on jsfiddle
.img{
float: left;
background-repeat:no-repeat;
background-size:100% 100%;
border-radius: 4px;
width: 200px;
height: 51px;
background: red;
overflow: hidden;
}
.img_overlay{
width: 100%;
height: 100%;
background: #222;
color: #ddd;
position: relative;
opacity: 0.8;
}
.img_overlay>div{
display: block;
width: 100%;
height: 50%;
text-align: center;
position: relative;
}
.img_overlay .middle{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.img_overlay .separator{
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
<div class="img">
<div class="img_overlay">
<div class="img_show_details">
<div class="middle">details</div>
</div>
<div class="img_open">
<div class="separator"></div>
<div class="middle">open</div>
</div>
</div>
</div>
All I did was taking off :
.img_overlay .separator{
position: absolute;
top: -1px;
left: 0;
}
This following fix works okay in firefox and chrome but mess in IE.
I fixed height in div, top in middle and top in separator
.img_overlay>div {
display: block;
width: 100%;
height: 40%;
text-align: center;
position: relative;
}
.img_overlay .middle {
position: relative;
top: 60%;
transform: translateY(-50%);
}
.img_overlay .separator {
position: relative;
top: 5px;
left: 0;
height: 3px;
width: 70px;
margin: 0 auto;
background: #444;
}
here's the demo in jsfiddle.
I have a relatively div positioned on top of a fixed position div and I would like to vertically align this first div. Is there a way to do this? This is my current markup:
<div class="overlay">
<div id="dialogInvoice">
content
</div>
</div>
The CSS:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
width: 390px;
height: 722px;
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: relative;
}
Any suggestions on this? I did try the line-height method but this is apparently only working when using mere text.
If your element does not have a fixed width or height then you can't use the other solutions without using javascript to calculate the values.
Here is an alternative.
#dialogInvoice {
width: 390px;
height: 722px;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
what you need to add to your css of #dialogInvoice is
top: 50%;
and change the margin to
margin: 361px auto;
(361 is 722 / 2)
it will first push your container half way down the page and then push it back up the required value, which is exactly half of its height (361px)
here is a jsfiddle for better understanding.
This CSS may do what you require:
.overlay {
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 10;
}
#dialogInvoice {
margin: 0 auto;
padding-top: 28px;
border-radius: 4px;
background: #ffffff;
position: absolute;
top: 100px;
bottom:100px;
left:100px;
right:100px;
}