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;
}
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 want the child div width to be 100% of the body.
CSS
#container {
position:relative;
width:400px;
height:100px;
margin:0 auto;
background:red;
}
#inner {
width:100%;
height:30px;
background:blue;
}
HTML
<div id="container">
<div id="inner"></div>
</div>
Here is the fiddle
I'm using position:relative for parent div and the position:absolute; solution is not working. How can I do this? Js solutions are acceptable.
Check this fiddle
CSS
body {
margin-top:30px;
}
#container {
width:400px;
height:100px;
margin:0 auto;
background:red;
}
#inner {
width:100%;
height:20px;
background:blue;
position:absolute;
right:0;
left:0;
}
You just have to remove the position:relative from the container div and everything will work as expected
AND
I dont think there is a need for writing JS for this as this can be just obtained using CSS.
In html, if you have an element inside of a container while using % it will respect the containers boundaries.
So, no sure why Lal was downvoted. but his solution works.
Especially because your container is relative, the absolute container will be absolute to the container and not the body itself. You could remove position: relative; on the container and it will work that way, but it depends on what you want to do.
Issue #1
Trying to make 2 divs align with eachother,
the fist div doesnt have a scrollbar, but the second has one. The scrollbar cause the second div to be offset from the first one.
Is there a way to align those 2 divs?
Issue #2
Why is the second div not scrolling when it has the overflow-y:scroll; ?
body, html {
margin: 0;
padding: 0;
border: 0;
outline: 0;
overflow:hidden;
}
.fixed-top-container {
text-align:center;
top:0px;
height:100px;
min-height:100px;
max-height:100px;
width:100%;
display:inline-block;
margin:0 auto;
padding:0;
background-color:rgba(0, 0, 0, 0.5);
}
.container {
width:100%;
height:100%;
background-color:#F0F0F0;
overflow-y:scroll;
}
.content {
width: 800px;
height:100%;
margin:0 auto;
background-color:#FFFFFF;
}
View JSFiddle for issue: http://jsfiddle.net/Aaeijh/qAh9g/1/
How can we get the bottom div to scroll?
Use the user friendly <textarea> instead of old <div> technique
<textarea rows="10" cols="50" class="container">
//your text here
</textarea>
JSFiddle
remove overflow:hidden; and overflow-y:scroll; ..
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
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