I have the following bootstrap example http://jsbin.com/EKEHeCIX/3/edit.
As you can see in the code above my form resides in the top of content. But I need to reside it in the middle.
Is it possible to make this without explicity setting of top in pixels? Because need to get it work for any screens (not tablets or phones)
You can do this without setting the top pixels.
Use this:
width: 50%;
height: 50%;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
With the position on absolute, you can make this responsive for any screensize.
You might want to take a look at this:
Absolute Centering
This can help you out with alot of centering/styling issues!
If you know the exact width and height of your element you could do something like:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -220px;
}
Setting margin-top as 50% of element's height and margin-left as the 50% of element's width.
And obviously you must add class="centered" to your element.
Here is your example: http://jsbin.com/EKEHeCIX/6
If you don't know the size of the element or it has a mutable size, you could (using jQuery) implement the css code with javascript:
$(function() {
var $obj = $('.centered');
$obj.css({
marginTop: -($obj.outerHeight() / 2),
marginLeft: -($obj.outerWidth() / 2)
});
});
Demo with javascript: http://jsbin.com/EKEHeCIX/7
You can use this trick :
.form-signin {
width: 400px;
height: 230px;
position: absolute;
/* top:50px for header size */
/* bottom:60px for footer size */
top: 50px; bottom: 60px; left: 0; right: 0;
margin: auto;
}
JSBin updated
Related
I have a position: fixed element. It has some top and left properties but it was not visible in the screen. After some debugging I found that it was positioned way off than it should be. So I set top: 0 and left: 0 and now that element was where I wanted it to be (near middle bottom) instead of being in the top-left of the screen as it should be.
Why is this happening? One thing is that it's parent container also has position fixed. I'll have a snippet below
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
<div class="container">
<div class="child">Test</div>
</div>
The reason there is a fixed component inside another fixed is that one is container and the other is kind of a tooltip so it has to be that way.
left and top properties should have some units associated with it, e.g. pixels. Try the following:
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
Got the answer. It's a bug in chrome where a child with fixed position doesn't work if any parent has transform: translate css.
Duplicate of this question
I'm using position: fixed; to make a div adjusting to different screen sizes. The height is set to 100% in this simplified example to make the div "example" always take up the whole height of the screen. What I want to do is making space both over and under this div and I'm doing so by using position: fixed; and top: 100px; bottom: 100px;
The problem is that the code only runs top: 100px; not both. Is there any way around this problem?
Fiddle
HTML
<div id="example"></div>
Css
#example {
background-color: #333;
width: 500px;
height: 100%;
position: fixed;
bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
top: 100px;
}
EDIT
And if I set the height using this function istead of setting height in css to 100%. How do I do then?
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('#example').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
You have to remove the height: 100%. The browser will calculate the distance between the top and bottom value and create the height you need.
new code:
#example {
background-color: #333;
width: 500px;
position: fixed;
bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
top: 100px;
}
JSFiddle
You seem to misunderstand the box model. When you say "height: 100%" it means that the height of the element will be the same number of pixels as the containing element with layout. Setting top:100px will result in moving the box down 100px, but it will not affect the height of the box. Thus, 100px of the box will overflow the viewport. This is the same if you specify bottom:100px, except that top 100px of the box will underflow the viewport.
Remove height 100% and the top and bottom instructions will calculate the element height.
#example {
background-color: #333;
width: 500px;
position: fixed;
bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
top: 100px;
}
Just try this instead of height: 100%, it would be enough; http://jsfiddle.net/xd2j2shm/1/
height: calc(100% - 200px);
EDIT: I like RMo's answer more. It is simpler. That being said, they both work.
To clarify, it sounds like you want the div to cover 100% of the height, minus for 100px at the top and 100px at the bottom.
The way to do this is relatively new. You need to use the calc value for your height property:
#example {
background-color: #333;
width: 500px;
height: calc(100% - 200px);
position: fixed;
top: 100px;
}
It has wide support in modern browsers: http://caniuse.com/#feat=calc
How can I change this code so it will show the image with 70% 70% and like we can have 30% blank margin from all four sides? I don't want to use CSS background properties but want to use the following code:
http://jsfiddle.net/LNzwb/4/
html:
<div id="bg"><img alt="" src="https://uwmadison.qualtrics.com/CP/Graphic.php?IM=IM_8qcNSb90kC6dqmx" /></div>
css:
bg{
position: fixed;
top: -50%;
left: -50%;
width: 70%;
height: 70%;
}
bg.img {
position: absolute;
top: 10;
left: 10;
right: 10;
bottom: 10;
margin: auto;
min-width: 50%;
min-height: 50%;
}
First of all, check your css selectors. #something is for ids, .something is for classes, and something is pure tags. Also, remember to separate them with a white space.
Second, your math: 70% width leaves 15% on each side, not 30.
Third, just set the image's width and height, and adjust the top and left accordingly: http://jsfiddle.net/LNzwb/7/
I'm trying to align a button in the middle of a scalable/responsive div. The problem is, the button isn't actually centered here. What am I missing? fiddle
div{
text-align: center;
}
button{
position: absolute;
top: 50%;
left: 40%;
}
When you use position: absolute; for centering elements, you need to negate the margin which are half of the size of the absolute positioned element. So say if your button is 100px in width you need to negate margin-left: -50px;
So in your case, am hardcoding 250px of the width so I negated -125px, same goes for height as well, if the height of the element is say 30px use margin-top: -15px;
button{
position: absolute;
top: 50%;
left: 50%;
margin-left: -125px;
width: 250px;
/* Use height as well if you need so, along with margin-top which
will have 1/2 of the negative value of the elements height */
}
Demo
The other way to achieve this is to use display: table-cell; with vertical-align set to middle
On the other hand, if you do not want to use negative margin you can use calc() as well
button{
position: absolute;
top: 50%; /* Use calc here too if you define height */
left: calc(50% - 125px); /* Half of the elements width */
width: 250px;
}
Demo 2
Try this code:
DEMO
button{
position: absolute;
top: 50%;
left:25%;
width:50%
}
You have to reduce the height/ width of the button from it's position as well.
Try this
button{
position: absolute;
top: 50%;
left: 50%;
margin-left: -112px;
margin-top: -25px;
}
Fiddle
DEMO
Here is your updated fiddle http://jsfiddle.net/pMxty/122/
a Bit of jQuery resolves it.
HTML
<div>
<button>Load my random useless data</button>
</div>
css
div {
text-align: center;
}
button {
position: absolute;
top: 50%;
}
jQuery
function place()
{
var a = $("div").outerWidth() / 2,
b = $("button").outerWidth() / 2;
$("button").css({
"left": (a - b)
});
}
$(document).ready(function(){
place();
$(window).resize(function(){
place();
});
});
I'm working on a lightbox. I need it to be dynamically sized based on its content. But I also need it to be centered in the screen. I'm trying something like this:
HTML:
<div class="lightbox-background">
<div class="lightbox">
LIGHTBOX CONTENT
</div>
</div>
CSS:
.lightbox-background {
background-color: rgba(0,0,0,0.9);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
.lightbox {
background-color: white;
width: 780px;
z-index: 100;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: auto !important;
max-height: 90%;
}
I couldn't make it work. I'd like to avoid using JS, if possible. How can I do it?
You could work with vertical-align: middle as well as the :before selector on the parent container. Check out my fiddle:
http://jsfiddle.net/GA5K3/2/
The best way that I know to center vertically with CSS is to absolute position top 50% then set a top margin negitave half height of element.
Since you don't know the height you'll have to use JS.
Maybe someone has a better technique.