How to open div on center screen position ?
You can define a size for the DIV and position it absolutely (or Fixed), like this:
div{
position:absolute; /* can also be 'fixed' */
top:50%; left:50%;
width:200px; height:100px;
margin:-100px 0 0 -50px;
z-index:99;
}
Or if you don't want to place it absolutly positioned, you can give it a width, and set it to:
div{ margin:0 auto; }
div{
margin-left: auto;
margin-right: auto;
}
This only works if the div has a width of 95% or less
Related
This question already has answers here:
Vertically centering a div inside another div [duplicate]
(24 answers)
Closed 6 years ago.
I'm trying to center a div horizontally and vertically inside another div. My problem is that on window resize the width and height of parent div changes. For that, I have problems to center the div in the center of the parent div.
Here is a case where I the width and height of the parent div is defined:
<div id="parent" style="">
<div id="child">Foo foo</div>
</div>
And the ccs:
#child {
display: table;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:red;
width:50px;
height:50px
}
#parent{
background-color:blue;
width:400px;
height:400px;
}
I don't know why it's so difficult to achieve it? JSFIDDLE
here's one way to achieve it :)
https://jsfiddle.net/e4xhrvcf/
.parent{
width:500px;
height: 500px;
background-color:red;
display: flex;
align-items: center;
}
If I understood what you want, I think you just need to add relative position to the parent in order to get absolute in the child to work:
#parent{
background-color:blue;
width:400px;
height:400px;
position : relative;
}
http://codepen.io/anon/pen/rrdVbO
#parent{
position: relative;
background-color:blue;
width:400px;
height:400px;
}
#child {
position: absolute;
top: 50%;
left: 50%;
background-color:red;
width:50px;
height:50px;
transform: translate(-50%, -50%);
}
The parent needs to have a position definition for the child's absolute to work. Use top and left 50% to center the left top corner of the child and transform: translate(-50%, -50%) to move it back up and left by half of its own height and width.
try this,
HTML
<div id="grandParent">
<div id="parent">
<div id="child">
foo foo
</div>
</div>
</div>
CSS
html, body{
height:100%;
}
#grandParent{
display: table;
min-height:100%;
width:100%;
}
#parent{
background-color:red;
display:table-cell;
text-align: center;
vertical-align:middle;
}
#child {
background-color:blue;
display:table;
margin:0 auto;
}
Fiddle
https://jsfiddle.net/guruling/7o764szj/2/
Use CSS-Flexboxes by setting display: flex; for the parent div, and setting margin: auto for the child div.
remove the top,bottom,right,left from the css.
I have a banner. In that banner is an image. When you resize the viewport/browsers width the image is scaled to a smaller size to fit the window.
Notice how when you resize the browser, as the image gets smaller, it moves in an upward motion away from the bottom of the div.
I want the bottom of the image to stick to the bottom of the div always. Regardless of size.
Heres my JS FIDDLE
HTML
<div class="wrapper">
<center>
<div class="imgWrapper">
<img src="http://lorempixel.com/500/300/">
</div>
</center>
</div>
CSS
.wrapper {
background:#777;
width:100%;
height:400px;
display:block;
}
.imgWrapper {
width:100%;
max-width:500px;
display:inline-block;
margin-top:100px;
}
.imgWrapper img {
width:100%;
}
I want the bottom of the image to stick to the bottom of the div always. Regardless of size.
Add position: relative to the parent element and position: absolute; to the child element (along with bottom and left values).
DEMO
This will do it for you https://jsfiddle.net/eaxe2sww/4/
.wrapper {
position: relative;
background:#777;
width:100%;
height:400px;
display:block;
}
.imgWrapper {
width:100%;
max-width:500px;
position: absolute;
bottom: 0;
left: 50%;
transform:translateX(-50%);
}
Is it possible to center an absolute position div within a relative dive with margin 0 auto?
HTML:
<div class="outer">
<div class="inner"></div>
</div>
CSS:
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:10px;
left:10px;
}
I was hoping that the absolute positioning would work within the outer one ok but I guess the margin. The above code can be seen here: http://jsfiddle.net/g4y4czff/
Ideally I'd like to use css to solve this but I reckon there's more likely to be a js solution.
Any ideas greatly appreciated.
C
New fiddle: http://jsfiddle.net/g4y4czff/1/
Just add position: relative to .outer
Reason is because the default position property is static
since you wanted it centered, here you have it centered horizontally and vertically too. Placing position:absolute; inside position:relative; allows it to be inside of it.
http://jsfiddle.net/g4y4czff/3/
.outer{
background: red;
margin: 0 auto;
width:100px;
height:100px;
position:relative;
}
.inner{
position:absolute;
width:20px;
height:20px;
background:blue;
top:0;
margin: auto;
left:0;
right:0px;
bottom:0;
}
I need a Colorbox to be customized: I want to force the colorbox image to open with exactly the height that is needed to have it a top-border of 70px and a bottom border of 50px, at a fixed centered position.
Also it would be nice to force it to rescale with browser - but thats another problem.
o.k. - so I made it with the following CSS:
#colorbox{
top:0px !important;
}
#cboxWrapper{
background:none repeat scroll 0 0 transparent;
border-radius:none;
}
#cboxTopLeft, #cboxTopCenter,#cboxTopRight{
height:70px;
background-color:transparent;
width:0;
}
#cboxMiddleLeft, #cboxMiddleRight{
height:0;
width:0;
}
#cboxContent{
margin: 0 50px 22px 50px;
}
#cboxLoadingOverlay,
#cboxLoadingGraphic,
/*#cboxTitle,*/
#cboxCurrent,
#cboxNext,
#cboxPrevious,
#cboxClose{
visibility:hidden;
display:none;
}
Hi i have this a div called "nav" that contains divs with a class "thumbs". Im trying to create a table of contents like div that can be scrolled to display further thumbnails.
this is my CSS so far: (note that each thumbs are position:absolute and is left: positioned accordingly)
#nav {
position:absolute;
width:768px;
height:214px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
overflow:auto;
}
.thumbs {
position:absolute;
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
I want it to be scrollable so that if the thumbnails exceed 768px (width of nav) it can be scrolled to the left to view more.
Thanks
edit: I forgot to mention that I am doing this in PhoneGap. It will be a mobile app. thanks!
Remove position: absolute; and add float: left; from your thumbs class. That should do it.
UPDATE
If the number of thumbs are known in advance, the inner div's width can be set via CSS. Otherwise, it can be set onload or whenever a thumb is added/removed via JS.
$('#div').css('width', ($('.thumbs').length * $('.thumbs:first').outerWidth(true)) + 'px');
You can achieve this with the combination with max-width, display:inline-block & white-space.
Like this:
#nav_outer {
position:absolute;
bottom:0px;
background:gray;
overflow:auto;
}
#nav {
height:214px;
max-width: 300px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
white-space:nowrap;
}
.thumbs {
white-space:normal;
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
http://jsfiddle.net/xzcDD/3/
In my example when the .thumbs less than the width of 300px then there is no scroll